Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Stretch header background across screen with two borders

    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;
    	}
    Last edited by mmaar; 02-12-2013 at 11:41 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    See http://www.w3schools.com/cssref/pr_class_position.asp values for POSITION property do NOT include "position: center"

    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
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    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 View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •