CODEWITHSUNDEEP
htmlcssimage
shennan
shennan

Reputation: 11676

Responsive background image resolution

I'm having issues with background image scales and responsive design.

I have a simple header image background along with a content image background. The header image is supposed to merge seamlessly into the content. Both images have fine grain textures, so they need to be the same scale at all times.

The header background is in an <img> tag, while the content is a background-image, as it needs to utilise the repeat-y functionality for an unknown amount of content...

But you can see the grain difference between the scaled inline image, and the background:

Header/Content Divide

I'm aware of the background-size attribute, but this is not backwards compatible, and I'm unsure if it caters responsively.

My CSS:

#header{

    max-width:700px;
    width:100%;
    margin:0 auto;

}

#header img{

    max-width:700px;
    width:100%;

}

#content{

    max-width:700px;
    width:100%;
    height:600px;    // <-- for testing with no content
    margin:0 auto;

    background-image:url('../imgs/bg-main.jpg');
    background-repeat:repeat-y;

}

The Relevant HTML:

<section id="header">
    <img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
    <!-- content goes here !-->
</section>

Any help on a fix or some options would be great.

Upvotes: 0

Views: 365

Answers (1)

kmm
kmm

Reputation: 618

Would you consider making the header image a transparent png? Leave out the light brown texture in the header image and set it as the background-image on an element that wraps #header and #content.

Otherwise, background-size will do what you want. Visitors on IE8 will not see the proper effect your going for, but that's not the worst thing in the world these days.

See: http://caniuse.com/background-img-opts

Upvotes: 1

Related Questions