Question

I’m probably going to ask something very simple but I’m struggling here.

I have picture which is cut verticaly into 2 pieces. Middle piece is a background for a div and it’s suppose to be always in the center of the page. Other piece is transparent in the middle and has graphics on both sides. I want graphic on the sides to hide/show more/less depending on screen resolution but always be positioned in the center so it always matches the middle piece with the pattern.

Here is my basic css:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: url(img/outerpic.png) no-repeat;
}
#wrapper { 
 margin: 0 auto;
 width: 1090px;
}
#content { 
 width: 1090px;
 background: url(img/innerpic.png) no-repeat;

}

I’ve done 1 version with fluid-fixed-fluid css and 3 pics but I not entirely happy about it (having problems to center it).

Any help would be much appreciated.

Answer 1

Without looking at any HTML example, my suggestion would be to use the background position CSS property.

http://www.w3schools.com/cssref/pr_background-position.asp