4

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

2

3 Answers 3

6

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

5
  • This Doesn't seem to make any difference.. thanks for answer though. Apr 5, 2013 at 10:16
  • Try background-size: cover?
    – Bill
    Apr 5, 2013 at 10:19
  • afraid not, still nothing.. I've made a fiddle so you can see whats going on.. jsfiddle.net/bBMdp Apr 5, 2013 at 11:06
  • 1
    Ahh, the inline background property was overruling the background-size property. I simply added !important and it worked! jsfiddle.net/bBMdp/1
    – Bill
    Apr 5, 2013 at 12:18
  • 1
    You sir, are a star! Thanks so much for your help! Apr 5, 2013 at 12:29
1

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

1
  • and this is to be placed in the " .thumbnails .thumbnail img{ " section yeah? as above, this doesn't seem to make any difference. Apr 5, 2013 at 10:18
0
-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.

1
  • As above, thanks for the answer, but nothing seems to be making a difference at the moment. Apr 5, 2013 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.