Grow your CSS skills. Land your dream job.

Responsive Content Image

  • # April 9, 2013 at 9:57 pm

    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”)

    # April 9, 2013 at 10:05 pm

    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

    # April 10, 2013 at 12:54 am

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

    # April 10, 2013 at 5:31 am

    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.

    # April 10, 2013 at 5:35 am

    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.

    # April 10, 2013 at 6:12 am

    Thanks Paulie_D nice reply

    # April 10, 2013 at 7:11 am

    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.

    # April 10, 2013 at 7:34 am

    Thanks for the heads up Paulie_D.

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

    # April 10, 2013 at 7:51 am

    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.

    # April 10, 2013 at 5:27 pm

    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 (http://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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".