Perspective flex containers compensating for 4k and 20k screens with my 1920x1080 page

Question 1

I have a background image on my body flex container.

It is set to grow 1, basis is 1047, justify flex start, aligns both set for stretch
If in my browser I zoom in, then when I scroll the the right, the background image remains the size my zoom was when loading the page.

I don’t want the image to shrink. How do I accomplish that?

For reference to parts of my page:
image

i have noticed that images and svgs in flexes sometimes behave odd. (This is a bug of html/css proabbly not perspective alone) try giving them a width/height (of auto idk)

1 Like

I didn’t see an option for that, so I added two values and named them width and height.
Is this right, how you meant?

image

kind of odd. I did this and at first it did not seem to work.
I set a color background on my root to an RGB code.
Saved again, and now it is working. I think maybe the auto did not take at first.

Well when I say it is working, I am getting the tiling effect of the size of the image, not the stretching.
Beats having the image shrunk to the screen size and then when I scroll it was showing white before.

Thanks for the help.


After more testing, I still have the issue kind of.
Getting white space after I shrunk the basis of the body to height 880 with grow 1.
I am not sure.

Im not really sure i understand what exactly you want to to happen but there are some more things you can try.
width and height to 100%
backgroundSize: auto|length|cover|contain|initial|inherit

backgroundSize: 100% 100% might be a good one too that surely will cover up any blank spots.

1 Like

Thanks for you help Victor.

Will be a while before I get back to this. Moved to a different priority.
When I can, I will try that and report back with images if it doesn’t work.

1 Like