Hi,
I am trying to design my first website and am currently "playing-with" some CSS features. I have been trying to get the "background image" property to work, but have been unsuccessful. Here's my code (very simple):
<?xml version="1.0" encoding="utf-8"?>
<!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>TITLE</title>
<link rel="stylesheet" type="text/css" href="ahbm.css" />
</head>
<body>
<h1 class="test">PAGE TITLE</h1>
</body>
</html>
The CSS I'm using:
.test {
background: url ("/bellsbanner.jpeg") fixed no-repeat center;}
I'm really trying to test this from my computer (Mac OS X 10.5.5), so here's how I have the files:
Desktop-
Folder-test-website
ahbm.css
bellsbanner.jpeg
ahbm.html
From what I've been reading, this should work. I've also tried removing the class attribute from the <h1> element and giving it to the <body> element, a <div> element, etc., but the image never shows up. I've also tried changing the url to (bellsbanner.jpg), (../bellsbanner.jpg). I can get the image to show up in the document when I link to it with an <img> tag directly in the html, but this isn't what I'm trying to do...
Thanks in advance for your time and any insight you may have!
TheBakedBaker
Full Version: Testing Background Image
QUOTE
background: url ("/bellsbanner.jpeg") fixed no-repeat center;}
Is the image really located at/bellsbanner.jpeg
or is it located at
bellsbanner.jpeg
?
I've tried it both ways. I suppose it's located at bellsbanner.jpeg. It's in the same folder on my desktop as the html and css files. There are no sub-folders in that folder, only the html, css, and jpeg image.
Thanks,
TheBakedBaker
Thanks,
TheBakedBaker
Then you shouldn't use the slash.
background: url ("bellsbanner.jpeg") fixed no-repeat center;
The URL of an image is relative to the stylesheet.
http://www.w3.org/TR/CSS21/syndata.html#value-def-uri
http://www.westciv.com/style_master/academ...alues.html#urls
background: url ("bellsbanner.jpeg") fixed no-repeat center;
The URL of an image is relative to the stylesheet.
http://www.w3.org/TR/CSS21/syndata.html#value-def-uri
http://www.westciv.com/style_master/academ...alues.html#urls
As I mentioned, I've tried it both ways (with and without the slash). I still get no background image. Am I structuring the files correctly? I have a folder on the desktop with all three files in it (html, css, image). The hierarchy goes like this:
Desktop--->AHBM (folder)--->ahbm.css, ahbm.html, bellsbanner.jpeg
I've changed the css to read: background: url ("bellsbanner.jpeg") fixed no-repeat center;
Desktop--->AHBM (folder)--->ahbm.css, ahbm.html, bellsbanner.jpeg
I've changed the css to read: background: url ("bellsbanner.jpeg") fixed no-repeat center;
QUOTE
background: url ("/bellsbanner.jpeg") fixed no-repeat center;}
Are you usingurl ("bellsbanner.jpeg")
or are you using
url("bellsbanner.jpeg")
?
If I'm reading the difference between the two correctly (a space between "url" and the opening parenthesis), the first one (I have a space between 'url' and the opening parenthesis).
There isn't supposed to be a space.
You may find our online markup validator (see links at top and bottom of page) and The W3C CSS Validation Service helpful.
You may find our online markup validator (see links at top and bottom of page) and The W3C CSS Validation Service helpful.
QUOTE(Darin McGrew @ Oct 30 2008, 02:24 PM) 
There isn't supposed to be a space.
You may find our online markup validator (see links at top and bottom of page) and The W3C CSS Validation Service helpful.
Well, that solved my problem! Thank you so much, Darin, for your time and assistance. The book I'm reading suggests whitespace shouldn't affect how the code/markup functions, but this doesn't always seem to be the case. Have a great day, thanks again
It doesn't - where whitespace is allowed. But you can't have it where it isn't supposed to be.
This is fine, even if not pretty.
#foo p{background: url( pix.jpg ) }
But the syntax is url(...), without a space.
This is fine, even if not pretty.
CODE
#foo p{background: url( pix.jpg ) }
But the syntax is url(...), without a space.
Thanks for the clarification! 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.