Using a jpg image for a banner background

[Antoine_Layton]

div#banner
{
background-image: url(topborder.jpg);
background-repeat: repeat-y;
}

div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}

The image does not show up in the banner. Any ideas??

[Force Flow]

Is the image located in the same directory as the CSS code is?

[mindfriction]

div#banner
{
background-image: url(topborder.jpg);
background-repeat: repeat-y;
}

div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}

The image does not show up in the banner. Any ideas??

The path to the image must be relative to where this CSS sits - or an absolute path

Also, it will only ever be as big as the content within that H1 tag as you havent specified a height or width on that DIV

[Antoine_Layton]

Is the image located in the same directory as the CSS code is?

Yep

[downtroden]

are you doing this locally or on a live server?

There could be issues with the permissions on the image.
What are the dimensions of the banner? Is the background image just not showing up or is it not showing up because the banner div isn't large enough?

[Antoine_Layton]

are you doing this locally or on a live server?

locally

Below is the complete the comple code for my style.css

body
{
margin: 0;
padding: 0;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}

a:link { color: #036; }
a:visited { color: #066; }

a:hover, a:active
{
color: #fff;
background-color: #036;
}

div#banner
{
background-image: url(topborder.jpg);
background-repeat: repeat-y;
}

div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}

div#container
{
background-image: url(nav_col_base.jpg);
background-repeat: repeat-y;
}

div#container2
{
background-image: url(more_col_base.jpg);
background-repeat: repeat-y;
background-position: right;
}

div#navigation
{
float: left;
width: 150px;
padding-top: 2em;
}

div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

div#navigation ul li { margin-top: 4px; }

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-image: url(nav_base.jpg);
background-repeat: repeat-y;
}

#navigation ul li a:hover
{
color: #fff;
background-color: #ccc;
background-image: url(nav_base2.jpg);
background-repeat: repeat-y;
}

div#more
{
float: right;
width: 160px;
margin: 0;
padding: 2em 10px 0 0;
color: #fff;
}

div#more h3
{
margin-top: 0;
color: #fff;
padding: .2em;
background-image: url(more_base.jpg);
background-position: right;
background-repeat: repeat-y;
}

div#content
{
margin-left: 190px;
margin-right: 200px;
}

div#content h2
{
font-size: 2em;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: normal;
}

div#content { line-height: 150%; }

#cleardiv
{
clear: both;
height: 1em;
}

div#footer
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: right;
}

div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}

div#footer li
{
display: inline;
margin-right: 1em;
}

[Antoine_Layton]

topborder.jpg is 500x83