PDA

View Full Version : CSS Nighmare (backgorund img and positioning)


presley2
05-17-2006, 03:30 PM
Hi,
I have a simple, but maddening problem, that I need help with ---before I shoot myself! I have created 3-.jpegs, for use as a a top-side-bottom graphic. I have created an external style sheet and tried numerous variations (box-positioning-margin etc.) to try and get the CSS pseudo-ids to render on a web browser correctly.....usually I get the "top" graphic to display as a thin line...not 150px..as expected...So, looking at the code below could someoine give me some general hints, to get my top-side-bottom graphics to render correctly (the full graphics at the top-side-bottom) in my web browser....????please help??

#side_graphic {
position:relative;
width:110px;
height:auto;
z-index:2;
left: 10px;
top: 183px;
visibility: visible;
background-image: url(../images/side_graphic.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top_graphic {
position:relative;
width:1150;
z-index:1;
left: 10px;
top: 33px;
visibility: visible;
background-image: url(../images/top_graphic_title.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 150px;
}
#footer_graphic {
position:relative;
width:1150px;
height:27;
z-index:3;
left: 10px;
top: 593px;
visibility: visible;
background-image: url(../images/bottom_graphic.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
} :x

domedia
05-17-2006, 05:25 PM
If your background-image is only 1px high, and you've set repeat to no-repeat, that how it will render. if this is the case, set background-repeat to repeat.