Background image positioning [Archive]

Click to See Complete Forum and Search --> : Background image positioning

Hellusius

08-27-2008, 07:25 PM

Hello fellow webdeveloper.

I have a small issue with a background image that does not want to correctly output itself whenever I try using the "Positioning: absolute" fuction, however this partially glitches the picture on the background.

The HTML code is as following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>intro page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="top">
<br />
</div>
</body>

the CSS class is:
.top {
background-image: url(http://wow-portal.nl/divinity/img/top.png);
background-attachment: fixed;
width: 590px;
height: 385px;
position:absolute;
left:100px;
top:0px;
z-index: 2;
repeat: no-repeat;
}

The output = http://wow-portal.nl/divinity/

Any thoughts on why this happens and how this can be resolved.

Cheers

Coyotelab

08-27-2008, 08:32 PM

I'm not sure how do you want to position them but this is how you gotta do it:
CSS:body {
color:#FFFFFF;
}
.background {
background-color:#000000;
background-image:url(http://wow-portal.nl/divinity/img/background.png);
height:750px;
margin:0 auto;
padding-bottom:50px;
vertical-align:bottom;
width:600px;
z-index:0;
}
.descriptiontxt {
font-family:verdana;
font-size:10px;
font-weight:bold;
}
.top {
background-attachment:fixed;
background:url(http://wow-portal.nl/divinity/img/top.png);
height:800px;
left:100px;
position:absolute;
top:0;
width:600px;
z-index:2;
}
.img {
background:url(http://wow-portal.nl/divinity/img/img.png);
background-repeat:no-repeat;
height:356px;
left:275px;
position:absolute;
top:300px;
width:464px;
z-index:1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>intro page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="background">
<div class="top"></div>
<div class="img"></div>
</div>
</body>
</html>

Hellusius

08-27-2008, 08:52 PM

Yes, thank you for the reply, this works allot better, however it let me bumps onto another problem.

Is it possible, to let the ".Top" and ".Img" background images, be inside the ".background" background image? cause if I position the way I did now, the background is centered at the center of the page regardless of the webvisitors monitor size, the absolute positioning will interfere with this and place the two other images on a left position from the start of the left side.

Is it possible to set the images, fixed within the first div table?

Regards

Coyotelab

08-27-2008, 10:30 PM

yes it is just apply the highlighted red:
.top {
background:transparent url(http://wow-portal.nl/divinity/img/top.png) repeat scroll 0 0;
height:800px;
margin-left:20px;
position:absolute;
top:0;
width:600px;
z-index:2;
}
.img {
background:transparent url(http://wow-portal.nl/divinity/img/img.png) no-repeat scroll 0 0;
height:356px;
margin-left:60px;
position:absolute;
top:300px;
width:464px;
z-index:1;
}

Hellusius

08-28-2008, 10:11 AM

Thank you, worked like a charm, actually pretty obvious that I missed "Margin"

I bumped into another little problem, which is actually a Z-index issue I have, on http://wow-portal.nl/divinity/ you see little sidebars from the left and the right of the content, there smalll bluestripes, however they are supposed to be laying above the containing content, so I specified it in the Z-index as 1 higher than the highest, however this does not work, since the banner part still overlapse the border.

Any idea's for this little issue here?

Coyotelab

08-28-2008, 03:43 PM

.top {
background:transparent url(http://wow-portal.nl/divinity/introimg/top.png) no-repeat scroll 0 0;
height:400px;
margin-left:6px;

Hellusius

08-29-2008, 02:46 AM

I tried that as last resort, but this is actually not what is supposed to happen, cause, the "Top" still overlapse the border img, and I can't figure out why it does that.

Coyotelab

08-29-2008, 04:09 AM

is this what you are looking for:
body {
color:#FFFFFF;
background-color: #000000;
}

a:link {color:#B8860B}
a:active {color: #FFFFFF}
a:visited {color:#B8860B}
a:hover {color: #FFD700}

.background {
background-color:#000000;
background-image:url(http://wow-portal.nl/divinity/introimg/background.png);
height:750px;
margin:0 auto;
padding-bottom:50px;
vertical-align:bottom;
width:600px;
z-index:-1;
}

.descriptiontxt {
font-family:verdana;
font-size:10px;
font-weight:bold;
position:relative;
top:350px;
width: 375px;
}

.top {
background:transparent url(http://wow-portal.nl/divinity/introimg/top.png) no-repeat scroll 0 0;
height:400px;
margin-top: 0px;
position:absolute;
width:500px;
z-index:1;
}

.img {
background:transparent url(http://wow-portal.nl/divinity/introimg/img.png) no-repeat scroll 0 0;
height:356px;
margin-left:70px;
margin-top: 0px;
position:absolute;
top:300px;
width:464px;
z-index:0;
}

.entersite {
width: 145px;
height: 120px;
position:relative;
top:235px;
left: 380px;
z-index: 2;
border: 0px none;
}

.bgborderR {
background:transparent url(http://wow-portal.nl/divinity/introimg/background_border_right.png) no-repeat scroll 0 0;
height:750px;
padding-bottom:50px;
width: 20px;
float: right;
z-index: 2;
}

.bgborderL {
background:transparent url(http://wow-portal.nl/divinity/introimg/background_border_left.png) no-repeat scroll 0 0;
height:750px;
padding-bottom:50px;
position:absolute;
width: 20px;
float: left;
z-index: 2;
}

img{border:0;}

Hellusius

08-29-2008, 12:01 PM

Thanks for the tons of feedback Coyotelab, I resolved this issue, by adjusting the "top" image and putting the small border to the top image, saved me some brainstorming on coding:P, but thanks again.

I did however off course bump into another problem, on "http://wow-portal.nl/divinity/news.php" I have an issue with the bottom image, it doesn't seem to react properly by aligning it exactly to the bottom, I have tried bottom: -"amount"px, and got it right, however, the div before it "contentcenter" has a y-repeat but doesn't end the image, if the text doesn't end exactly at the same pixel as the background image.

Any thoughts?

Coyotelab

08-29-2008, 04:54 PM

here is the neat solution add as much as text you want to:
css:* { margin:0; padding:0;}
body { font-size: 62.5%; font-family: Georgia, serif;}
.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}
}
div#page-content {width:766px; margin:25px auto;}
.center-content {width:766px; background: url(http://wow-portal.nl/divinity/img/text_holder_repeat.png) repeat-y; margin:50px 50px;}
.center-content .inside {padding: 10px 50px 10px 50px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="page-content">
<div class="center-content">
<img src="http://wow-portal.nl/divinity/img/news_top.png" width="766" height="115" alt="testing" />
<div class="inside">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra iaculis felis. Praesent porta elit quis arcu. In egestas. Nullam consectetuer aliquet elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut ligula. Fusce eget orci id nulla volutpat consectetuer. Etiam tristique. Suspendisse semper, lectus rutrum sagittis mattis, erat ante dignissim purus, sed ullamcorper magna urna porttitor dui. Praesent eu orci. Donec sollicitudin, ipsum id imperdiet congue, nibh ligula scelerisque nulla, non lacinia lorem erat quis risus. Duis tempor augue vitae sem. Donec augue libero, commodo a, elementum in, faucibus vitae, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tincidunt massa. Nullam sit amet nunc eget ante dictum aliquet. Nam et sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra iaculis felis. Praesent porta elit quis arcu. In egestas. Nullam consectetuer aliquet elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut ligula. Fusce eget orci id nulla volutpat consectetuer. Etiam tristique. Suspendisse semper, lectus rutrum sagittis mattis, erat ante dignissim purus, sed ullamcorper magna urna porttitor dui. Praesent eu orci. Donec sollicitudin, ipsum id imperdiet congue, nibh ligula scelerisque nulla, non lacinia lorem erat quis risus. Duis tempor augue vitae sem. Donec augue libero, commodo a, elementum in, faucibus vitae, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tincidunt massa. Nullam sit amet nunc eget ante dictum aliquet. Nam et sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce condimentum porta turpis. Quisque id ligula nec ligula faucibus tempus. Maecenas sagittis quam nec sem. Nullam non lacus a eros lobortis tincidunt. Curabitur enim ante, venenatis id, mattis non, lacinia a, lorem. Nulla condimentum, tellus ut volutpat auctor, dui turpis cursus nulla, id semper orci purus vel lorem. Integer volutpat leo id turpis. Duis massa metus, viverra et, rutrum ac, tincidunt vel, neque. Nullam euismod. Maecenas sed odio dignissim neque pellentesque pharetra. Aliquam quis dolor. Aenean a diam. In at metus a erat gravida faucibus. Vestibulum euismod. Pellentesque rhoncus lobortis ipsum. Proin metus. Maecenas lobortis velit ac felis luctus blandit. Etiam tincidunt ipsum sit amet lorem condimentum suscipit. Proin tincidunt scelerisque odio. Nullam dictum quam in sem. Suspendisse rhoncus venenatis risus. Curabitur non augue. Ut sodales urna sed purus. Vestibulum nec risus vel ipsum viverra accumsan. Quisque tellus est, mattis eu, faucibus eget, venenatis non, tellus. Donec a dui. Nunc id leo. In pulvinar eros vitae arcu. Nam massa. Integer bibendum augue nec justo. Phasellus adipiscing, turpis non ornare congue, nisi metus dapibus est, sit amet ultrices enim ligula eu libero. Etiam viverra condimentum tellus. Nam mattis mauris quis est. Maecenas a ante. Duis varius, metus ultricies dictum malesuada, enim diam elementum arcu, sed pretium risus augue et neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vehicula nulla sit amet ipsum. Duis auctor purus eget lorem. Cras volutpat arcu suscipit dui. Etiam id sapien. Nam mattis metus egestas odio. Aenean id neque ullamcorper nibh adipiscing ultrices. Vivamus velit odio, posuere in, feugiat ut, malesuada quis, libero. Aenean sagittis risus sit amet orci. Curabitur tincidunt arcu eget ante. Praesent leo est, molestie in, posuere id, placerat in, urna. Morbi dolor pede, porttitor in, venenatis ac, lacinia sed, libero. Sed consequat, dui ac tristique bibendum, velit eros consequat neque, id ornare ligula dolor eu massa. Nunc fringilla pellentesque eros. Vivamus quis purus non mauris dignissim luctus. Sed porta tristique arcu. Vestibulum congue.</p></div>
<img src="http://wow-portal.nl/divinity/img/text_holder_bottom.png" width="766" height="82" alt="text_holder_bottom" />
</div>
</div>
</body>
</html>