CODEWITHSUNDEEP
htmlcssimageresponsive-design
Lee Hibberd
Lee Hibberd

Reputation: 99

Resizing Background image for mobile device

Right then, I've just been playing with my site, and adding a "new" banner onto some of the images, I've done this the simplest way I could think which is as follows..

<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>

Now this works fine when viewed on a desktop as the images are already the right size for the site, but when I view it on a mobile device the .png image is scaled down, but not the background image..

I know I'm missing something from the css, but as I'm still learning, I don't know exactly what its missing, which is where you guys come in..

here is a little more of my html..

<div class="thumbnail">
    <a href="#">
        <img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
             </a>
                 </div>

And here is the mobile css in question..

.thumbnails
{
}

    .thumbnails .thumbnail
    {
        border-top: solid 1px #e5e5e5;
        padding-top: 2em;
        margin-top: 2em;
    }

    .thumbnails .first
    {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .thumbnails .thumbnail img
        {
            margin-top: 5px;
            height: 180px;
            margin-right: 8px;
        }

    .thumbnails .thumbnail blockquote
        {

            margin-left: 143px;
        }

So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)

I'm sure someone can help, so many thanks in advance.

EDIT: Here is a quick fiddle, so you can see whats going on... http://jsfiddle.net/bBMdp/

Thanks

Upvotes: 4

Views: 15569

Answers (3)

Bill
Bill

Reputation: 3517

Try this:

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: 100% 100%;

}

Or:

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: cover;

}

Source(s)

MDN - background-size - CSS

Upvotes: 6

David Goss
David Goss

Reputation: 707

-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;

This will scale down the background so it's only ever big enough to cover the whole box.

Upvotes: 0

Akhil Thesiya
Akhil Thesiya

Reputation: 950

Use background-size:XXpx XXpx; first value is take width and second value is take height.

Upvotes: 1

Related Questions