...

View Full Version : Div background trick...



pankirk
10-24-2010, 09:00 PM
What I'm trying to do is get three divs and line them up vertically so that they all connect together forming a seamless background. I have 3 images I need to use for the background and they are: the main vertically repeating background, and two images--top and bottom--which will give the effect that they are completing the rounded corner of the top and bottom of the outer div. I have tried using the css3 technique where I have one background image which repeats, and then the two top and bottom of the div which completes the rounded border, but since the images are semi-transparent, they are overlapping and causing the image to be darker then I want.

Here is an example of the darkening I'm talking about:
http://oi56.tinypic.com/8wyy2v.jpg

I'm looking for a solution which will allow me to have everything set up to using an html element rather than relying on css3 to render 3 background images, it doesn't work in IE anyway.

Here is a picture of what I'm trying to do, where each color represents a new div or an html element:
http://oi52.tinypic.com/1z52qzl.jpg

Thanks I hope someone can help.

Rowsdower!
10-25-2010, 06:31 PM
Give us a link to your test page and we can be of much more assistance in debugging the problem. As a first step, have you validated (http://validator.w3.org/) your HTML?

pankirk
10-27-2010, 07:09 AM
I know what the problem is, I don't know how to fix it.

Here is how my content boxes are set up:


.glass_header_top{
float: left;
width: 932px;
height: 7px;
background-image: url("images/glass_header_top.png");
background-repeat: no-repeat;
}
.glass_header_mid{
padding-left: 7px;
float: left;
width: 932px;
height: auto;
background:
url("images/glass_header_top_rep.png") top left no-repeat,
url("images/glass_header_top_rep2.png") bottom left no-repeat,
url("images/glass_header_mid.png") repeat-y;
}
.glass_header_bottom{
float: left;
width: 932px;
height: 7px;
background-image: url("images/glass_header_bottom.png");
background-repeat: no-repeat;
}

And here is how it's used:



<div class="glass_header_top">&nbsp;</div>
<div class="glass_header_mid">&nbsp;</div>
<div class="glass_header_bottom">&nbsp;</div>


Because the rounded edges of the image I'm using for the corners of the content box, I had to slice the rest of the rounded corner and place it with the backrgound image which is where I get this code"


url("images/glass_header_top_rep.png") top left no-repeat,
url("images/glass_header_top_rep2.png") bottom left no-repeat,
url("images/glass_header_mid.png") repeat-y;

Since my images are transparent, the top part of the extended rounded corner overlaps the original repeating background, causing two transparent images to overlap and create a less transparent image. Not good.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum