Stretch and scale a CSS image in the background - with CSS only
I want that my background image stretch and scale depending on the browser viewport size.
I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS backgroundfor example. It works well, but I want to place the image using background, not with an img tag.
In that one an img tag is placed, and then with CSS we tribute to the img tag.
width:100%; height:100%;
It works, but that question is a bit old, and states that in CSS 3 resizing a background image will work pretty well. I've tried this example the first one, but it didn't work out for me.
Is there a good method to do it with the background-image declaration?
CSS
- asked 9 years ago
- B Butts
2Answer
CSS3 has a nice little attribute called background-size:cover. This does not stretch the image, but it will crop the image accordingly.
- answered 8 years ago
- Sunny Solu
You could use the CSS3 property to do it quite nicely. It resizes to ratio so no image distortion (although it does upscale small images). Just note, it's not implemented in all browsers yet.
background-size: 100%;
- answered 8 years ago
- Sunny Solu
Your Answer