https://codepen.io/gtrman97/pen/eYBQMwE
When I use background-size: cover; the pic is too big but the welcome heading is in it’s place. When I use background-size: contain; the picture fits just right but the welcome heading is pushed down below outside of the picture.
Tested on codepen.
Welcome heading stays at the same place in both cases. Its position is not dependent on background-size.
height: 245vh; - vh means viewport height. Play around with this value.
You will probably need a background position as well.
Check out the w3 page on backgrounds for elements you can apply to the background.
Then how come it moves when I change background-size?
I will repeat myself. Position of <div>, <li>, <p>… elements is not dependent on background-size.
Background size is the size of the poster you hang on the wall. It has no power to change the size of the wall or position of your furniture. To understand what I mean, set background-color on every one of your divs to a different color, then play around with background-size.
Check the following information as well so you can learn about cover and contain. I think you are not understanding the principle behind these two properties as well.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.