Menu
This is my page http://inogroup.it/preload/index.htm
Width of image boxes is responsive
How to set the height to be responsive too? Like 50% of the screen?
If I do this change:
.pattern{ background-size: contain; margin-bottom:25px; width:100%; height:50%; } it's not working
Thank you very much!
787
Try setting your header to height: 100% . Alternatively (the better solution), set the background on the body if you want it to cover the whole page.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
If the background-size is contain or cover : While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With