How to Stretch and scale a CSS image in the background – with CSS only ?
- use the CSS3 property to do it .
- It resizes to ratio so that no image distortion will happen (although it does upscale small images).
- Just note, it’s not implemented in all browsers yet.
- CSS3 has a attribute called background-size:cover.
- This does not stretch the image, but it will crop the image accordingly.
- It stretches bg to fill entire element on both axis
- Use this CSS:
- You can add this class into your CSS file.
- In order to scale your images appropriately based on the container size , here is the following code :
- We can do this through the CSS background-size property in CSS3.
- We’ll use the html element (better than body as it’s always at least the height of the browser window).
- We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword