SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with background-image not showing

    For whatever reason my background image will not show and i cant figure it out.Can any one give me some help?



    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>#</title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
    </head>
    
    <body>
    
        <div class="wrapOverall">
        
            <div class="header">
            
                <div class="nav">
                	<ul>
                    	
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">About</a></li>
                        
                    </ul>
                </div><!--nav-->
            
            </div><!--header-->
            
            <div class="content">
            
            	<div class="wrapContentImage"></div><!--wrapContentImage-->
            	<div class="wrapLogos"></div><!--wrapLogos-->
                
            </div><!--content-->
            
            <div class="wrapBucket">
            
            	<div class="bucket1">
                
                	<h2>#</h2>
                
                </div><!--bucket1-->
                
                <div class="bucket2">
                
                	<h2>#</h2>
                
                </div><!--bucket2-->
                
            	<div class="bucket3">
                
                	<h2>#</h2>
                
                </div><!--bucket3-->       	
            
            </div><!--wrapBucket-->	
        
        </div><!--wrapOverall-->
    </body>
    
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /*#############*/
    /*General Rules*/
    /*#############*/
    
    .body{
    	background-image:url(Images/bg_body.jpg);
    	
    }
    
    .h1,h2,h3,h4,h5,h6 {
    	
    }
    
    .p{
    	
    }
    
    .a{
    	
    }
    
    .a:hover{
    	
    }
    
    /*###################*/
    /*General Class Rules*/
    /*###################*/
    
    .wrapOverall{
    	
    }
    
    .wrapBucket{
    	
    }
    
    .wrapContentImage{
    	
    }
    
    .wrapLogos{
    	
    }
    
    .header{
    	
    }
    
    .nav{
    	
    }
    
    .content{
    	
    }
    
    /*#################*/
    /*General Nav Rules*/
    /*#################*/
    
    .nav ul{
    	
    }
    
    .nav ul li{
    	
    }
    
    .nav ul a{
    	
    }
    
    .nav ul a:hover{
    	
    }
    
    /*#############*/
    /*Bucket Rules*/
    /*############*/

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Hi, nathang, welcome to the forums.

    There seems to be an unnecessary dot in front of .body in the CSS. Delete the dot and the image should appear.
    Code:
    .body{
    	background-image:url(Images/bg_body.jpg);
    	
    }
    Cheers

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hi nathang. Welcome to the forums.

    Code:
    background-image:url(Images/bg_body.jpg)
    the thing you have to be really careful about is the file paths (in red). Unless you have a folder called /Images/ inside the same folder as the CSS file, that path won't work. If the /Images/ folder is in your root folder, it's safer to do this:

    Code:
    background-image:url(/Images/bg_body.jpg)
    EDIT: hehe, well spotted, ronpat.

  4. #4
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <sigh> It was the dot .....

    Thanks for the help.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by nathang View Post
    <sigh> It was the dot .....

    Thanks for the help.
    You're very welcome, nathang.

  6. #6
    Non-Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you dont use .body css. you should change <body> to <body class = "body"> , or change add <div class="body"> after <body>.


Bookmarks

Posting Permissions

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