1

I want to make a panel with background image, which can be resized vertically. So the simple idea is to split actual image in three parts: header, body-repeat-part, footer. It looks something like this

<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>

.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}

So I slice my image which is 100x100 into three parts - header.png - 100x20, footer.png - 100x40, and body-repeat.png - 100x1

Everything works fine in Ie9 and firefox. And even chrome works fine with 100% zoom. However when I change zoom in Chrome the picture becomes jagged i.e. you could see it's "glued" from 3 parts. Apparently chrome scales differently these images.

So my question is - could this be fixed somehow? Or is there any way to make resizable panel with background image?

Many thanks for the replies.

1
  • Are you using a table for layout?
    – Kyle
    Sep 19, 2012 at 6:45

1 Answer 1

0

You can try to force no paddings, borders and margins on that tables and divs, and then try to add the CSS3 background size property!

.header {
background-image:url(header.png); 
background-size:110px 20px;
}

More about CSS Background size properties: http://www.w3schools.com/cssref/css3_pr_background-size.asp

It is better too try to avoid tables when making a layout structure :)

EDIT: You can try too to add the

background-size: cover;

property on the full page background so the background image will fit 100% of the width and height of the given area.

A great and very complete tutorial about background-size: http://www.css3.info/preview/background-size/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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