CSS Forum

**DarkStorm** · 03:26 AM

I've been staring at this code for 4 days now and I'm completely stumped. I've asked a few friends fluent in web design and any suggestions they had yielded nothing. I'm using the "background-image:" command in my CSS file to put a header image at the top of my website, but even though the code appears perfectly fine to me, the image refuses to register. I can tell that it partially works because a blank spot appears at the top of the page forcing everything else down to make room, but the image doesn't appear. Here's what my code looks like :

Code in the HTML file :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Clan Velocity </title>
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="The home website of Clan Velocity">
<meta name="Keywords" content="velocity; savage; clan; game">

<link rel="stylesheet" type="text/css"
href="file:///C:/Documents and Settings/Brad <edited>/Desktop/Velocity Website/WiP Style Sheet.css">
</head>

<body class="template">

<div class="header"></div>

</body>
</html>

The "template" class simply contains background color and font/size/color for all of content. I also have to use to full file path for the link to the CSS file because when I try the short version it doesn't work.

Code in the CSS file :

Code:

div.header
{
            width: 812px ;
            height: 213px ;
            background-image: url ('-V-Images/Header_Banner1.png') ;
            background-position: top center ;
            background-repeat: no-repeat ;
}

body.template
{
            margin-left: 2cm ; margin-right: 2cm ;
            color: yellow ;
            font-family: trebuchetms ;
            text-align: left ;
            background-color: black ;
}

Can anyone tell me what I'm doing wrong? I've even cross-referenced this code with the source from a few websites similar to mine. They look exactly the same, but mine doesn't work and theirs does.

**joder** · 09-21-2007, 12:41 AM

So you name your folders starting with dashes and that folder is in the same directory as your html file?

**vangogh** · 09-21-2007, 03:34 AM

The problem is most likely in your path to the image. That's a strange folder name as James pointed out. Also when you're linking to your css file you shouldn't need to use your file system as the path (By the way I removed your last name from the path since I wasn't sure if you meant to show that to everyone)

Are both the html file and the css file in the folder named "Velocity Website" and is there another folder in the Velocity Website folder called -V-images? And then inside -V-images is there a file named Header_Banner1.png?

That's how you have things set up based on the paths you used to access the css file and the background image. Is that where the files are located.

And I assume the problem is with the site when viewed locally. This isn't online is it?

**DarkStorm** · 04:07 AM

Yes the website is local I won't upload it until I'm done with it.

- "Velocity Website" is the main folder with everything inside and it's located on my desktop. And yes it contains both the HTML and CSS documents inside it.
- Yes there is a folder called "-V-Images" inside the "Velocity Website" folder.
- Yes there is a file named Header_Banner1.png inside the "-V-Images" folder.

Here's the weird thing. When I put the image on the web page via the HTML file (using an <img> tag) the full path works. However when I try to shorten the path using this method, it doesn't work.

This implies that the problem doesn't lie in the file path, since it works when it's typed fully into an <img> tag.

**LadynRed** · 09-21-2007, 05:09 PM

What is the default directory set to for your site on your hosting provider ?
Some file systems may not like the dash as the first character in a folder name either.

**DarkStorm** · 09-21-2007, 10:26 PM

I don't have a host yet, I don't plan on uploading the website at all until it's finished. I'm a college student without a job at the moment so I would rather not lay down the cash for a host until I have an actual product to put on it.

**coolkbk585** · 09-21-2007, 10:35 PM

Hosts like

-Freewebs
-Freeweb7
-x10 Hosting

Will all have everything that you would need for something like what you are building...

Or you could host a webserver on your computer, and refer to the files relatively, instead of their absolute position on your hard drive.

**joder** · 09-21-2007, 11:07 PM

Xampp
http://www.apachefriends.org/en/xampp.html
Easy to set up. If you have any questions, you know where to ask

http://www.dyndns.org You just have to use a different port than 80 if you ISP blocks it.

**vangogh** · 09-21-2007, 11:24 PM

Try using simple paths.

From the html to the css file
<link rel="stylesheet" type="text/css" href="WiP Style Sheet.css">

and from css to image try getting rid of the dash out front.

Better for the html to css link would be to use dashes instead of spaces and lower case is usually the default so

wip-style-sheet.css
v-images/header-banner1.png

and then naturally you'd change your paths to match.

You'll have to change the href to the css file if you move things online anyway since your server won't be able to access your desktop.

**DarkStorm** · 07:18 PM

Ok I've made progress! (thanks to you guys ^.^)

Here's where I'm at now. I've fixed the simple path issue by taking all dashes and spaces out of the folders and files involved so I can successfully use the simple paths in my <img> tags to make the images show up instead of being forced to use the full paths. However, the problem with the style sheet image code registering on the html document still remains, here's what my code looks like now :

Code in HTML :

Code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="velocitystylesheet.css">
</head>

<body class="template">

 <div class="header"></div>

</body>
</html>

Code in CSS :

Code:

div.header
{
            width: 812px ;
            height: 213px ;
            background-image: url ('images/header1.png') ;
            background-position: top center ;
            background-repeat: no-repeat ;
}

body.template
{
            margin-left: 2cm ; margin-right: 2cm ;
            color: yellow ;
            font-family: trebuchetms ;
            text-align: left ;
            background-color: black ;
}

Most of the file names and paths have been changed/simplified but I modified all the necessary code to compensate for that change so all the links are correct. But the image still won't show using the CSS document. However, the images show fine when using the <img> tag in the HTML document.

Just to restate the problem. The code highlighted in blue does not produce an image in the website. However, it does produce the margins and pushes everything else on the page down. It does partially work but the image doesn't show up for some weird reason, and I can't figure out what's wrong with the code. All the file paths and positions have been checked, everything is where it should be on my computer, and everything is named properly.

**vangogh** · 09-24-2007, 10:24 PM

Try removing the space in url ('images/header1.png') so it reads

url('images/header1.png')

I'm not sure if that matters, but it might. I don't think you need the quotes around the path either. I generally don't use them, though I'm not sure if it's an issue.

Also there are shortcuts in css. I usually combine the image, position, and repeat of the background into one statement

url('images/header1.png') no-repeat top center

Hope that helps, but if not we'll try again until we get it working.

**DarkStorm** · 08:15 PM

Unbelievable, to think that the entire bug in the code rested on that simple space between the "url" and the "(".

The image is showing up now, thank you so much vangogh!!! When I tried putting the "no-repeat" and "top center" on the same line it didn't work so I'll just leave them where they are. Finally I can move forward in the website thanks much!

Edit : Unfortunately with one problem solved, another one was born. It seems that the centering command does not register on the CSS document either. The image is aligned to the left of the page. I've typed it exactly how it should be typed and it doesn't work. And if I type it on the same line as the image, the image doesn't work period.

**vangogh** · 09-27-2007, 02:07 AM

When you tried everything on one line did you use background-image or just background. It needs to be background

background: url('images/header1.png') no-repeat top center;

But you say this image is aligning itself to the left instead of being in the center. I'm wondering if it's because you have the text-align: left on the body class.

A couple of things about the way you styled the body. You didn't need to assign that class. You can place the style directly on the tag. Instead of

body.template { }

you can use

body { }

and then take the class off the body tag.

text-align: left is the default so you really don't need to add it. With the margins try to get in the habit of using 'px' or 'em' or % to define widths and heights.

What I think might happening is since the css for body.template is coming after the css for div.header the text-align:left of the body is overriding the top center of the div tag. In all honestly I don't think it should, but it's the only thing I can think for why the image is aligning to the left. The css on the div looks right to me.