mharris7190
mharris7190

Reputation: 1374

Why isn't my background CSS image showing

So I made a background image to that is just two colored bars to match my header and nav bar. I just want it to repeat horizontally but its not showing up. Heres a screen shot that shows my files and the image: enter image description here

Thanks for any help!

HTML

   <!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Tech MAX'd</title>
   <link rel="stylesheet" href="css/main.css" type="text/css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   <script src="js/general.js" type="text/javascript"></script>
</head>


<body>  
   <div id="big_wrapper">
      <header id="top_header">
         <h1>Welcome to Tech MAX'd</h1>
      </header>

      <nav id="top_nav">
         <ul>
            <li>...

CSS

*{
   margin:0px;
   padding:0px;
}
h1{
    padding: 2px;
    color: #ffffff;
    font: 24px Palatino;
    display: inline-block;
}
h2{
   font: bold 14px Palatino;
}
header, section, footer, aside, nav, article, hgroup{
   display:block;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
background: #e0e0e0 url(images/tmbackground.gif) repeat-x;
}
#big_wrapper{
   min-width:1000px;
   max-width: 1000px;
   margin: auto;
   text-align:left;
}
#top_header{
   padding:20px;
   background-color: #820000;
}
#top_nav{
   padding:7px 7px 7px 20px; /* top,right,bottom,left */
   background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#b6b6b6))
}
#top_nav li{
   display:inline-block;
   list-style:none;
   padding-right:25px; /*space between links*/
   font: bold 14px Tahoma;
}
a.topLinks{
    color: #4e4e4e;
    font: bold 16px Century;
    text-decoration: none
}
a.topLinks:hover{
    color: #820000;
    font: bold 16px Century;
    text-decoration: none
}
#new_div{
   display:inline;
}
#main_section{
   min-width: 630px;
   max-width: 630px;
   border: 1px solid #820000;
   background-color: white;
   float: left;
   margin: 20px;
   padding: 20px;
}
#side_news_banner{
    float: left;
    margin-top: 20px;
    margin-left: 15px;
}
.side_news{
   border: 1px solid red;
   width:220px;
   margin: 20px 0px;
   padding: 30px;
   background: #66CCCC;
}
#the_footer{
    clear: both;
   text-align:center;
   padding: 20px;
   border-top: 2px solid green;
}
article {
   background: #FFFBCC;
   border: 1px solid ;
   padding: 20px;
   margin-bottom: 10px;
}
article footer{
   text-align:right;
}

Upvotes: 2

Views: 11070

Answers (3)

Andrew Morton
Andrew Morton

Reputation: 25013

Unless the directory images is a subdirectory of css, you need to use

url(../images/background.gif)

because the location is relative to the css file.

Also, it's usual to leave a space between the selector and the "{", i.e. body { rather than body{.

Upvotes: 5

Quentin
Quentin

Reputation: 943163

Odds are that you are keeping it in http://example.com/images/background.gif. Your stylesheet is saying it is in http://example.com/css/images/background.gif so you are getting a 404 error.

Upvotes: 4

Ilya Sidorovich
Ilya Sidorovich

Reputation: 1610

I do not quite understand why do you need the width attribute for body. But the problem could be in your url. I suppose that it sould be "/images/background.gif". If you put "images/background.gif" it will specify css/images/background.gif.

Upvotes: 0

Related Questions