Alex Rivera | Logout

Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an <img>?

Asked 2013-04-08T15:30:37.093
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!

Edit
Report

1 Answer

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.

answered 2013-06-20T14:25:44.380

Your Answer