Using image for content background (responsive)

HTML & CSS
1

Hi,

I would like to use image of old paper for content background in responsive page. I’ve used following css code in div named Content

#content {
clear: both;
float: left;
margin-left: 16.8498%;
width: 74.7252%;
display: block;
margin-top: 0px;
background-image: url(../images/old-paper2.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
}

The problem is that image gets cut when resizing browser under certain width. How can I fix this?

Regards

2

Oh, I forgot to add some sample of image background, so here it is:
http://depositphotos.com/2959725/stock-illustration-Old-paper.html?sst=0&sqc=22&sqm=256092&sq=145r27

3

ninostar, What does “gets cut” mean? Do you mean that the background image disappears at one of the media query break points? If so, look for a background shortcut in that media query that may be overriding the one shown above.

4

background-size: cover preserves the proportions of the image, so that if the image is too tall for the content area, some of it will be hidden.

An alternative would be to use

background-size: 100% 100%;

but the image can then get a bit distorted. There’s no perfect solution. I’d still go with the old principle of not using a background image that can’t be repeated (even if with some clever slicing).

5

Hi ralph.m,

Thanks… that worked, but it really gets quite a lot distorted when re-sizing browser (a little bit before getting at default break point for tablets - 769px). So I’m thinking about cutting image in three divs or something like that?!

@ ronpat: No, I didn’t mean that. I know what media queries do… thanks anyway.

Regards