Stretch header background across screen with two borders

mmaar · 02-12-2013, 11:33 PM

Hi it's me again..

I'm struggling to get my header background to stretch across the entire screen with two different borders. I've been trying absolutely everything but it's just completely stuck now

Code:

div#topborder
	{
	width:100%;
	height: 86px;
	position: relative;
	background:url(/layout/general/topborder.png) repeat-x top;
	position: center;
	z-index: 0;
	display:block;
	border-bottom: 10px solid #a85a5a;
	top: -90px;
	}

#topborder:before 
	{
   	content: " ";
   	position: absolute;
	bottom: 0px;
	top: 0px;
	right: 0px;
	left: 0px;
   	border-bottom: 5px solid #faf9f9;
	}

waxdoc · 02-12-2013, 11:56 PM

See http://www.w3schools.com/cssref/pr_class_position.asp values for POSITION property do NOT include "position: center"

Quote:

static Default. Elements render in order, as they appear in the document flow
absolute Element is positioned relative to its first positioned (not static) ancestor element
fixed Element is positioned relative to the browser window
relative Element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
inherit The value of the position property is inherited from the parent element

See also http://www.w3schools.com/cssref/pr_b...d-position.asp for background=position property values

Quote:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom If only specify one keyword spedified, other value will be center"

x% y% First value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%

xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

inherit Specifies that the setting of the background-position property should be inherited from the parent element

Excavator · 02-13-2013, 02:34 AM

Hello mmaar,
Your CSS is conflicting. You take an 86px tall #topborder and position it 90px off the top of the page so all you can see is the border.

I wonder if your position: center; is an attempt at positioning your background image. If that's the case then background-position: center; is what you were trying for but, since you've already started with the shorthand the correct way would be



	background: url(/layout/general/topborder.png) repeat-x center top;

Even that may have unexpected results since you repeat that on the X axis and I'm not sure how the browser will decide to center it.

See CSS background properties here.
See CSS shorthand here.

Look at your #topborder styled like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
div#topborder {
	width: 100%;
	height: 86px;
	position: relative;
	background: url(/layout/general/topborder.png) repeat-x;
	z-index: 1;
	border-bottom: 10px solid #a85a5a;
}
#topborder::before {
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-bottom: 5px solid #faf9f9;
}
</style>
</head>
<body>
	<div id="topborder"></div>
</body>
</html>

mmaar · 02-13-2013, 02:02 PM

Quote:

Originally Posted by waxdoc

See http://www.w3schools.com/cssref/pr_class_position.asp values for POSITION property do NOT include "position: center"

See also http://www.w3schools.com/cssref/pr_b...d-position.asp for background=position property values

Thanks, but removing "position: center" didn't make it any different.

Quote:

Originally Posted by Excavator

Hello mmaar,
Your CSS is conflicting. You take an 86px tall #topborder and position it 90px off the top of the page so all you can see is the border.

I wonder if your position: center; is an attempt at positioning your background image. If that's the case then background-position: center; is what you were trying for but, since you've already started with the shorthand the correct way would be



	background: url(/layout/general/topborder.png) repeat-x center top;

Even that may have unexpected results since you repeat that on the X axis and I'm not sure how the browser will decide to center it.

See CSS background properties here.
See CSS shorthand here.

Look at your #topborder styled like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
div#topborder {
	width: 100%;
	height: 86px;
	position: relative;
	background: url(/layout/general/topborder.png) repeat-x;
	z-index: 1;
	border-bottom: 10px solid #a85a5a;
}
#topborder::before {
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-bottom: 5px solid #faf9f9;
}
</style>
</head>
<body>
	<div id="topborder"></div>
</body>
</html>

Thanks for your reply, but the code you provided didn't help. The border is now stuck underneath by header image and on top of my other divs. Furthermore, the border is still not stretched across the entire screen.