9

Not a a native english speaker so there's probably a better way to shape the question...anyway:

What I want to create is similar to the header here: http://thegreatdiscontent.com/adam-lisagor The header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct. This is made using an and getting the text to appear on the using position: absolute.

But if you use css for the background-image instead of an , you'll get something like this header: http://elegantthemes.com/preview/Harmony/ Resize browser to see parts of the background being left out.

Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link? Or do I have to change how my entire header works and use the for the background for it to show fully in all screensizes?

I would like to have a header background that doesn't leavy anything out, but is fixed like this http://getflywheel.com/ Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.

Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!

Jonathan
  • 697
  • 3
  • 13
  • 24

5 Answers5

19

Here is a nice and simple tip with only css/html:

Ingredients

  • Transparent PNG image with the desired ratio (transparent-ratio-conserver.png)

  • tag

  • Different images for different view-ports (retina.jpg, desktop.jpg, tablet.jpg...)

The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

In the CSS, we set background-size to fit the and we choose the width of our image.

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
}

and finally, we serve for every view-port the right image:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
}

You can download the demo from here.

Yassin
  • 1,376
  • 18
  • 18
  • 1
    This is the way I went. But if you check out different mobile devices like (some crappy) Android Tablets, you'll notice that if the has background-image, it doesn't work properly. So I had a
    with background, and the div contains the transparent png to preserve the ratio in all screen sizes.
     – Jonathan Jun 22 '13 at 17:41
  • I googled many posts about this issue and none resolve my need too. Your way works except one case: my background image has different ratio between desktop/mobile screens. The ultimate problem is we can't change image source in CSS. – Tien Do May 18 '17 at 02:48
3

This is done with the background-size property:

background-size: cover;

Cover will make the image as small as it can be, whilst still covering the entirety of its parent, and maintaining its aspect ratio.

You may also want to try contain, which makes the image as big as it can be whilst still fitting inside the parent.

Source(s)

MDN - background-size CSS property

animuson
  • 53,861
  • 28
  • 137
  • 147
Bill
  • 3,478
  • 23
  • 42
  • But how to make the div have the right aspect ratio of the background-image on all screen sizes? I mean, won't parts of the image get left outside the screen like here http://elegantthemes.com/preview/Harmony/ – Jonathan Apr 08 '13 at 15:43
  • It make the image as small as it can be, whilst still covering the whole parent, and keeping its aspect ratio. So if it is a different aspect ratio to the screen some clipping will occur, but it's minimal. – Bill Apr 08 '13 at 15:45
2

I think theres a better solution than contain or cover (which dind't work for me, btw). Here's an example I recently used for a logo:

#logo{
    max-width: 600px;
    min-height: 250px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat center;
    background-size: 100%;
}

So now we have a responsive div with a backgound image, which size is set to the full width of the div.

CranK
  • 21
  • 1
0

Although there are other solutions. % will scale the div to image size or the aspect ratio.

.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

}

rajesh_kw
  • 1,572
  • 16
  • 14
0

You just need to pass the height to width ratio to the element. For an image 1400x600;

1400:600 = 98:42

span( style="padding-bottom:42%;
             width:98%;
             background:url('/images/img1.jpg');
             background-size:contain;
             display:inline-block;")

would display the same as 

img(src="/images/img.jpg" style="width:98%;")
lonewarrior556
  • 3,917
  • 2
  • 26
  • 55