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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Page Background Image Not Showing

    I can't seem to add a background image to my index page, I can easliy change the colour of the background but when added an image nothing appears, I've double check the url a number of times and everything there is fine, but the image still doesn't apear.

    I working locally

    html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    	<title>Studio 2</title>
    	<link rel="stylesheet" href="_css/style.css" type="text/css" media="screen" />
    </head>
    
    <body>
    	
    	<div id="container">
    	
    		<div id="header">
    			<div id="logo"><img src="_img/logo.png" width="89" height="93" alt="studio 2" /></div>
    		</div>
    		
    		<div id="navgation">
    			<ul id="menu">
                    	<li><a href="#">Home</a></li>
                    	<li><a href="#">My Account</a></li>
                    	<li><a href="#" class="active">Shop Men's</a></li>
                    	<li><a href="#">Shop Woman's</a></li>
                    	<li><a href="#">About Us</a></li>
                </ul>
    		</div>
    		
    		<div id="breadcrum">
    			<div id="bleft">
    				<a href="#" class="bleftlink">Back to shoes page</a>
    			</div>
    			<div id="bright">
    				<a href="#" class="brightlink">shop men's</a> - <a href="#" class="brightlink">footwear</a> - <a href="#" class="brightlink">supra</a>
    			</div>
    		</div>
    		
    		<div id="sidebar">
    			<h2>men's fashion</h2>
    			<ul id="sidebarmenu">
                    	<li><a href="#">accessories</a></li>
                    	<li><a href="#">bags</a></li>
                    	<li><a href="#">hoodies &amp; sweatshirts</a></li>
                    	<li><a href="#">jackets &amp; coats</a></li>
                    	<li><a href="#">jeans</a></li>
                    	<li><a href="#">jewellery</a></li>
                    	<li><a href="#">jumpers &amp; cardigans</a></li>
                    	<li><a href="#">polo shirts</a></li>
                    	<li><a href="#">shirts</a></li>
                    	<li><a href="#">shoes</a></li>
                    	<li><a href="#">trainers</a></li>
                    	<li><a href="#">t-shirts</a></li>
                    	<li><a href="#">underwear</a></li>
                </ul>
                <br />
    			<h2>shop by brand</h2>
    			<ul id="sidebarmenu">
                    	<li><a href="#">supra</a></li>
                    	<li><a href="#">plain jane homme</a></li>
                    	<li><a href="#">lrg</a></li>
                    	<li><a href="#">kr3w</a></li>
                    	<li><a href="#">funky bling</a></li>
                    	<li><a href="#">the hundreds</a></li>
                    	<li><a href="#">phormula inc.</a></li>
                    	<li><a href="#">benny gold</a></li>
                </ul>
    
    		</div>
    		
    		<div id="content">
    			<img src="_img/Supra-Spring-11.jpg" alt="supra spring 2011" />
    		</div>
    		
    		<div class="clearfooter"></div>
    	
     	</div>
     	
     	<div id="footer">
    		<ul id="footermenu">
        	    	<li><a href="#">home</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">shop men's</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">shop women's</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">shopping cart</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">about us</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">contact</a></li>
        	    	<li>|</li>
        	    	<li><a href="#">site map</a></li>
        	</ul>
      	</div>
     		
    </body>
    
    </html>
    CSS
    Code:
    html, body
    {
    	text-align: center;
    	
    	margin: 0px; padding: 0px;
    	
    	height: 100%;
    	
    	background-image: url(_img/bg.jpg); background-repeat: repeat-x;
    }
    
    h2 
    {
    	font-family: Helvetica; font-size: 12px; font-weight: bold;
    	
    	text-transform: uppercase;
    }
    
    a:link 
    {
    	text-decoration: none;
    	
    	font-family: Helvetica; font-size: 9px; font-weight: bold;
    	
    	color: #4D4D4D;
    }
    
    a:active, a:hover
    {
    	text-decoration: none; color: #ee3532;
    }
    
    #container
    {
    	position:relative;
    	
    	margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: -30px;
    	
    	width: 940px; min-height:1000px;
    	
    	text-align: left;
    	
    	background-color: white;
    	
    	border-style: solid; border-width: 10px; border-color: #efefef; border-top: none; border-bottom: none;
    }
    
    #header
    {
    	width: 940px; height: 130px;
    	
    	background-color: black;
    }
    
    #logo
    {
    	width: 89px; height: 93px;
    	
    	margin: 0px;
    	
    	padding-top: 18px; padding-left: 33px;
    }
    
    #navgation
    {
    	width: 920px; height: 30px;
    	
    	margin: 10px; margin-top: 0px; margin-bottom: 0px;
    	
    	border-bottom: 1px; border-bottom-style: solid; border-bottom-color: black;
    }
    
    ul#menu 
    {
    	margin: 0px; padding: 0px;
    	
    	line-height: 30px;
    	
    	text-align: center;
    }
    
    ul#menu li 
    {	
    	display: inline;
    	
    	padding-right: 30px;
    }
    
    ul#menu li a 
    {
    	text-decoration: none;
    	
    	color: #4D4D4D;
    	
    	font-family: Helvetica; font-size:12px; font-weight:bold;
    	
    	text-transform: uppercase;
    }
    
    ul#menu li a.active, ul#menu li a:hover 
    {
    	color: #ee3532;
    }
    
    
    #breadcrum
    {
    	width: 920px; height: 30px;
    	
    	margin-left: 10px; margin-right: 10px;
    	
    	border-bottom: 1px; border-bottom-style: solid; border-bottom-color: gray;
    }
    
    #bleft
    {
    	width: 450px; height: 30px;
    	
    	float: left;
    	
    	text-align: left;
    	
    	font-family: Helvetica; font-size:9px; font-weight:bold;
    	
    	text-transform: uppercase;
    	
    	line-height: 30px;
    }
    
    #bright
    {
    	width: 450px; height: 30px;
    	
    	float: right;
    	
    	text-align: right;
    	
    	font-family: Helvetica; font-size:9px; font-weight:bold; color: #bfbfbf;
    	
    	text-transform: uppercase;
    	
    	line-height: 30px;
    }
    
    a.bleftlink:link 
    { 
    	color: #ee3532; 
    }
    
    a.brightlink:link 
    { 
    	color: #bfbfbf; 
    }
    
    #sidebar
    {	
    	margin: 0px; margin-left: 10px;
    	
    	width: 216px; height: 100%;
    	
    	float: left;
    	
    	text-align: left;
    }
    
    ul#sidebarmenu 
    {
    	margin: 0px; padding: 0px;
    }
    
    ul#sidebarmenu li 
    {	
    	
    	list-style-type: none;
    }
    
    ul#sidebarmenu li a 
    {
    	text-decoration: none;
    	
    	color: #4D4D4D;
    	
    	font-family: Helvetica; font-size:12px; font-weight:normal;
    	
    	text-transform: uppercase;
    	
    	line-height: 22px;
    }
    
    ul#sidebarmenu li a.active, ul#sidebarmenu li a:hover 
    {
    	color: #ee3532;
    }
    
    #content
    {	
    	margin: 0px; margin-left: 16px; margin-right: 10px;
    	
    	padding-top: 10px;
    	
    	width: 686px; height: 100px;
    	
    	float: right;
    	
    	text-align: left;
    }
    
    .clearfooter 
    {
       height: 100px;
       clear: both;
    }
    
    #footer 
    {
       width: 940px; height: 30px;
       
       margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
       
       position: relative;
       
       color: #b4b4b4;
    	
    	font-family: Helvetica; font-size: 12px; font-weight: normal;
    }
    
    ul#footermenu 
    {
    	margin: 0px; padding: 0px;
    	
    	text-align: center;
    }
    
    ul#footermenu li 
    {	
    	display: inline;
    	
    	padding-right: 10px;
    }
    
    ul#footermenu li a 
    {
    	text-decoration: none;
    	
    	color: #b4b4b4;
    	
    	font-family: Helvetica; font-size: 12px; font-weight: normal;
    	
    	text-transform: uppercase;
    }
    
    ul#footermenu li a.active, ul#footermenu li a:hover 
    {
    	color: #ee3532;
    }

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    In your css, you don't call the function by background-image, its just background. You also still need the quotation mark to call it. So if your information is correct you should be looking at something like this

    Code:
    background: url('_img/bg.jpg') repeat-x;
    Also are you sure you img folder has the underscore before it?

    Hope this helps.


  •  

    Posting Permissions

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