WP2X We can help your Wordpress faster 
Background Stretch and scale in CSS is what you will need to do in responsive html slicing all of time. My situation happen all of times so that I share you this way to help you and remind me when I need it.
The key and the magic to show background of a css layer in 100% scale is background-size. Just use it like this
1 2 3 | #my_container { background-size: 100% auto; /* width and height, can be %, px or whatever. */ } |
To preserve the aspect ratio of the image you should use “background-size: cover;” or “background-size: contain;”.
Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.
Use this html:
1 2 3 | <div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div> |
with the following CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #background { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; } .stretch { width:100%; height:100%; } |
and you should be done!
In order to scale the image to be “full bleed” and maintain the aspect ratio, you can do this instead:
1 | .stretch { min-width:100%; min-height:100%; width:auto; height:auto; } |
Reference: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background
You save me many hours to research. Thanks guy
Simple and useful CSS tips, thanks man.
Jacky, you commented twice for one topic 🙂
That ‘s really useful. Thanks for a good tips about CSS. It ‘s nice to add more bookmark from you