Background image won't show up

casho · #1 (**permalink**) Mar 3rd, 2008, 07:09

I'm having a bit of trouble I'm wanting the news and screenshot sections to have background but there not showing up.

Html

HTML: Select all

<!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>
        HL2D Home
    </title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>


<body>
<div id="container"> <!-- 1 -->

<div id="nav"> <!-- 2 -->
<div id="image"> <!-- 3 -->
    <a href="Home.html">
    <img src="Images/HL2DLogo.png" width="137" height="112" alt="Hl2DLogo" />
    </a>    
</div> <!-- 3. end of image-->

    <a class="navCon" title="Home">Home</a>    
    <a class="nav" href="about.html" title="About">About</a>
    <a class="nav" href="screenshots.html" title="Screenshots">Screenshots</a>
    <a class="nav" href="downloads.html" title="Downloads">Downloads</a>
    <a class="nav" href="" title="Forum">Forum</a>
</div> <!-- 2. end of nav-->
<div id="content"> <!-- 4 -->

<div id="header"> <!-- 5 -->
<h1>Home</h1>
</div> <!-- 5. end of header-->
   
<div id="middle">
   
   
<div id="newsContainer"> <!-- 6 -->
    <div class="contentTop"> <!-- 7 -->
    <h2>News</h2>
    </div> <!-- 7. end of contentTop-->
    
    <div class="contentMid"> <!-- 8 -->
   <div id="news"> <!-- 9 -->
    <h4> 10.8.08
    </h4> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.7.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.6.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.5.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    </div> <!-- 9. end of news-->
    </div> <!-- 8. end of contendMid-->
    
    <div class="contentBottom"> <!-- 10 -->
    </div> <!-- 10. end off contentBottom-->
    
</div> <!--end of newsContainer-->
 
<div id="right"> <!-- 11 -->
<div class="screenshots"> <!-- 12 -->

<div class="contentTop"> 
<h2>Screenshots</h2>
</div> <!-- end of contentTop-->

<div class="contentMid">
<a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 1" />
    </a>
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 2" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 3" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 4" />
    </a>
    </div> <!--end of contentMid-->
</div> <!--end of screenshots-->

<div class="contentBottom">
</div>

<div class="about">
<h2>About</h2>
<p>Hl2D stands for Half Life 2D, HL2D is a recreaction of Half Life. It has a different story but some of the enemies are still the same. It's made with Construct</p>
</div> <!-- end of about-->

</div> <!-- end of right-->
<div id="contentEnd">

</div> <!-- end of contentEnd-->
</div> 
<div id="footer">
Designed by Joe Blair
</div> <!-- end of footer-->

</div> <!--End of Container -->
    

    

</body>

</html>

Css

Code: Select all

body {
    background-color: #666666;
    font-family: Arial;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
img {
border: 0px;
}
}
p {
    font-size: 10;
}
h4 {
    padding: 0px;
    margin: 0px;
    text-align: left;
}


a.nav, a.nav:link, a.nav:visited  {
    display: block; 
    width: 98px; 
    height: 45px; 
    background: url(Images/NavTab.png); 
    border: 0px; 
    margin-top: 5px;
    margin-left: 24px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #999; 
    line-height: 70px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}

a.nav:hover  {
color: #FFA824; 
}

a.navCon, a.navCon:link, a.navCon:visited {
    display: block; 
    width: 122px; 
    height: 46px; 
    background: url(Images/NavTabOn.png); 
    border: 0px; 
    margin-top: 5px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #000; 
    line-height: 68px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}

#container{
width: 1000px;
margin: auto;
}

#nav{
float: left;
width: 122px;
}

#image{
margin-left: -10px;
}

#content{
width: 688px;
float: left;
padding: 10px;

}

#right{
width: 300px;
right: 350px;
top: 90px;
}
#header{
background: url(Images/Layout/Top.png) no-repeat;
margin: -10px;
height: 20px;
padding-left: 10px;
}

#middle {
background: url(Images/Layout/Middle.png) repeat-y left;
margin: -10px;
padding: 20px;
}

#footer {
background: url(Images/Layout/Bottom.png) no-repeat;
margin: -10px;
height: 20px;
font-size: 12px;
font-family: arial;
padding-left: 10px;
}


#newsContainer{
width: 313px;
padding: 5px;
clear: both;
}

#news{
background: url(Images/Layout/ContentMid.png);
padding: 5px;
}

#screenshots{
width: 313px;
}
<!--Content-->
#contentTop{
background: url(Images/Layout/ContentTop.png);

}

#contentMid{
background: url(Images/Layout/ContentMid.png) repeat-y;
}

#contentBottom{
background: url(Images/Layout/ContentBottom.png);
height: 20px;
}

Jack Franklin · #2 (**permalink**) Mar 3rd, 2008, 15:07

2 things. In this line:

Code: Select all

    margin: 0;
    padding: 0;
}
img {
border: 0px;
}
}

You have an extra '}'

Then in this bit:

Code: Select all

<!--Content-->

You are using the wrong comment. For CSS it is:

Code: Select all

/*Comment Here*/

See if that helps.

danny322 · #3 (**permalink**) Mar 3rd, 2008, 15:48

Jack, is the '*' not needed before margin: 0; padding: 0; aswel?

Jack Franklin · #4 (**permalink**) Mar 3rd, 2008, 17:12

danny - That's just an extract from the code above which accidentaly cut a bit in half. The margin: 0; padding: 0; is fine, just my copying.

Aso · #5 (**permalink**) Mar 3rd, 2008, 18:27

Also, something off-topic - danny, you've got no measurement for your paragraph font size

Code: Select all

p {
font-size: 10;
}

casho · #6 (**permalink**) Mar 4th, 2008, 22:12

Ok I've done that but still it's the same.
Also here the link to it
http://detabeta.com/HL2D/Home.html

unitedcraig · #7 (**permalink**) Mar 4th, 2008, 23:33

Could you use

Code: Select all

#news{
background-image: url(Images/Layout/ContentMid.png);
padding: 5px;
}

Craig

casho · #8 (**permalink**) Mar 5th, 2008, 09:04

Nope still doesn't work.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Can't get a large image to show up	tseyigai	Flash & Multimedia Forum	2	Jan 7th, 2008 20:12
Can't get background to show	casho	Starting Out	17	Aug 14th, 2007 11:17
Image slide show	peebman2000	Flash & Multimedia Forum	8	Feb 15th, 2007 18:17
Cant Get CSS background images to show up	mschroeder	Web Page Design	3	Jan 18th, 2007 13:33
Background image overlaping footer image at bottom of div	lw_d	Web Page Design	4	Mar 21st, 2006 00:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Background image won't show up