Jump to content

Repeat CSS background vertically: center, right and left


Ryusuke
 Share

Recommended Posts

is the content a fixed width? if it is, make yourself an image that is one pixel tall, and as wide as it needs to be by cutting of the top 1px of that image, copying it, and putting it at either side of the image. then fill the middle with a different color.ex: -----------------------------------------------------------set it as the background, and it will repeat downwards (and sideways too if it's not wide enough).

Link to comment
Share on other sites

If you are working with a more liquid layout, you can use the following css / html

CSS:<style type="text/css">#left {	background: url(bluebaronside.gif) repeat-y top left;	padding-left: 28px;	margin-left: 50px;}#right {	background: url(bluebaronside.gif) repeat-y top right;	padding-right: 28px;	margin-right: 50px;}HTML:<div id="left"><div id="right">  Your content / center column html will go here.</div></div>

The 28px came from the width of the image you provided, but if you want a bit more padding inside the border you can make that bigger, and the 50px is just so you can have a bit of space on the outside of the borders. If you want it to go all the way to the outside just get rid of the margins, and if you want more, just increase them. I have tested this in Opera, Firefox and IE6, and it works great.

Link to comment
Share on other sites

Fixed width is when you are using px (pixels) or other percise sizes for your document. % (Percentages) are usually not fixed because they can grow with your browser (The more bigger you make your browser window the more bigger/wider your content will get automatically). Learn more here: http://www.w3schools.com/css/pr_dim_width.aspYes, he also wanted you to use the HTML.:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...