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 to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Full width header in browser

    I've been trying to figure this out for over an hour now and I've given up and I'm asking for help.

    How do you make a (image) header the full width of the browser? I want it to be more fluid without distorting the image. It's really starting to aggravate me! I'd like the navigation to do the same thing if possible.

    Here's my code - very simple. I took it back to the original code without letting you guys see all my failed attempts in there. lol

    Help.. anyone?

    css
    Code:
    #body {
    	position:relative;
    	font-family:"Times New Roman", Times, serif;
    	font-size: 14px;
    	color: #FFFFFF;
    	background-image:url(images/brown_bg.jpg);
    	background-repeat:repeat;
    }
    
    #container {
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 14px;
    	color: #FFFFFF;
    	height: auto;
    	width: 950px;
    	margin: 0px auto 0px auto;
    
    }
    
    #head {
    	height:190px;
    	background-image:url(images/header_bg1.jpg);
    	background-repeat:no-repeat;
    	width: 950px;
    }
    
    #navigation {
    	height:79px;
    	width: 950px;
    	background-image:url(images/nav.png);
    	background-repeat:no-repeat;
    }
    
    #content {
    	height: 360px;
    	width: 950px;
    	padding-top: 30px;
    }

    html
    Code:
    <body id="body">
    	<div id="container">
        	<div id="head">
            </div>
        		<div id="navigation">
            	</div>
            		<div id="content">
               	  		<img src="images/miles.png" /><img src="images/planvacation.png" /><img src="images/photos.png" /><img src="images/low_blacksquare.png" /><img src="images/calendar.png" /><img src="images/contact.png" />
                	</div>
    	</div>

    Thanks everyone for reading

    -Liz

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Are you talking about the background image? If so then you might add:

    background-size:100% 100%;

    HTH.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Full width both horizontally and vertically is:
    Code:
    background-size: cover;
    Or no distortion with just 100% horizontally somthing like:
    Code:
    width: 100%; height: auto;
    Web Design Portfolio 1 | Web Design Portfolio 2
    --------------------------------------------------------------------
    *Reminder to self. Validate code - then ask forum questions.

  • #4
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Code:
    background-width: 100%; 
    background-height: 100%;
    Should be all you need.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Posting Permissions

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