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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts

    css background image

    i feel so stupid, im stuck with the most basic of things!
    i have a image called bg.gif in a folder called images in the root folder. also in the root folder there is a page called index.htm and a folder called scripts with a style sheet in called main.css. no matter what i try i cannot get the background image to appear. Am i missing something blatenly obvious?

    index.htm
    Code:
    <html>
    <head>
    	<link href="scripts\main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    	<div id="container">
    		<div id="pagehdr">
    			
    			<img src="images/header1.jpg" />
    			
    			<div id="topmenu">
    				<ul id="navtop">
    					<li><a href="home.htm">Home</a></li><li><a href="products.htm">Products</a></li><li><a href="gallery.htm">Gallery</a></li><li><a href="links.htm">Links</a></li><li><a href="contact.htm">Contact Us</a></li>
    				</ul>
    			</div>
    			
    		</div>
    		<div id="pagemain">
    		Main Page
    		</div>
    		<div id="pageftr">
    		footer
    		</div>
    	</div>
    </body>
    </html>
    main.css
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	font-family: sans-serif;
    	background-image: url('/images/bg.gif')
    	}
    
    #container {
    	width: 780px;
    	margin: 0 auto;
    	text-align: left;
    	background-color: #ffff99;
    	}
    
    #pagehdr {
    	}
    	
    #pageftr {
    	text-align: center;
    	font-size: 12px;
    	font-weight: normal;
    	}
    	
    #pagehdr img {
    	border: 0px none;
    	width: 780px;
    	}
    
    #navtop {
    	text-align: center;
    	padding: 0.5em 0em 0.5em 0em;
    	margin: 0px;
    	}
    
    #navtop ul {
    	}
    	
    #navtop li {
    	display: inline;
    	list-style-type: none;
    	padding: 0px;
    	margin: 0px;
    	}
    
    #navtop li a {
    	background-color: #ffff99;
    	padding: 0.5em 2em 0.5em 2em;
    	margin: 0px;
    	font-family: sans-serif;
    	font-weight: 800;
    	font-size: 16px;
    	text-decoration: none;
    	color: #000000;
    	
    	}
    	
    #navtop li a:hover {
    	background-color: #000000;
    	color: #ffff99
    	}
    	
    a {
    	background-color: #ffff99;
    	font-family: sans-serif;
    	font-weight: 800;
    	text-decoration: none;
    	color: #000000;
    	}
    	
    a:hover {
    	text-decoration: underline;
    	}
    	
    div {
    	border: 0px none;
    		padding: 0px;
    	margin: 0px;
    	}
    Thanks for any help.

  • #2
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You forgot the semi-colon( behind the background.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by sdcomputerz View Post
    You forgot the semi-colon( behind the background.
    Its not necessary if its the last item in the CSS declaration. I think the issue here is this line
    Code:
    	<link href="scripts\main.css" rel="stylesheet" type="text/css" />
    Notice anything wrong?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    /not yet\

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for your help guys, but its actually a problem with the path, it should be:

    Code:
    background-image: url('../images/bg.gif')
    because the style sheat is located in a separate folder, all paths are from there (if you see what i mean)

    cheers all the same

  • #6
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Notice anything wrong?
    I do not :-s


  •  

    Posting Permissions

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