Responsive Content Image

[thomasaustin]

Hi guys, first time post here and I’m quite excited to join the forum. Also just a heads up as this may be a rookie question.

I’m updating a website for an online store, and I want the main image to scale to the browsers width. As you can see I’ve added it in as a background image and when you zoom out the edges end. I’ve tried a few different solutions but I can’t seem to get the result I’m after.

If there is anyone who could lend a hand it would be much appreciated, thanks.

[Shilla Website](http://www.shilla.com.au “Shilla Website”)

[JohnMalcolm]

Hi Thomas,
My first time here too! :-D

I think you need to add background-size: contain; to the #body div.

That will scale the image so its largest size while its width and height can fit inside the div.

Cheers
John

[proudfist]

like John said, use background-size: property and set it to % so it scales.

[Paulie_D]

Be aware that `background-size: contain` will cause the image to shrink vertically when the viewport is reduced as well which might lead to some whitespace underneath it.

>Contain well scale the image to the largest size such that both its width **and its height** can fit inside the content area.

Try it and see.

[Paulie_D]

With that **particular image** I might try `background-size:cover` and change the positioning to `right top`. That way the woman will move more towards the centre at smaller viewport sizes.

[Benjmin]

Thanks Paulie_D nice reply

[thomasaustin]

Thanks for replying guys. I gave contain a try, it did what Paulie_D said and left whitespace between the image and footer. I’ll give the second option a go now and let you know how it goes.

[JohnMalcolm]

Thanks for the heads up Paulie_D.

Good to know that background-size: contain does that!

[thomasaustin]

I gave cover a go and it tends to make the image oversized. I like what contain achieves with the scaling, but I need the footer to adjust with the image. Would there be another way around this? I really appreciate your replies guys.

[JohnMalcolm]

Im not sure if this is best practice, but I would just add some media query for .wrapper-footer with a bigger negative margin. One for all (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ “Standard Devices”).

e.g :

/* iPads (landscape)

---

*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.wrapper-footer {
margin-top: -194px;
}
}

Might not be best practice but its the quickest solution I can think of.

[Author]

Posts