...

View Full Version : Background Image Not Showing



lmw1
04-17-2011, 06:30 AM
I can't for the life of me figure out why my background image is not showing up. When I go to its direct path URL...it's there.

In my XHTML I have a div id named "page"

Here's my CSS:

body {
margin: 0;
padding: 0;
background: #0f467c;
}

#page {
background: url(images/bg.jpg) no-repeat center top;
}

*For the image path I've tried it like it is above, I've tried it like ../ and I've tried it like /

I've also tried this...and nothing.

#page {
background: url(../images/bg.jpg) no-repeat center top;
width: 100%;
display: table;
}

Nothing.

Any help would be appreciated.

Respectfully,
Len

bullant
04-17-2011, 06:38 AM
You haven't specified where the images directory is in relation to the directory your web page is in.

If your css is in an external file, the relative path is referenced from the directory the css file is in.

If images is a child directory then I normally specify the path as

url('./images.num1.jpg')

. = current directory

.. = parent directory

Leprkawn
04-17-2011, 06:40 AM
lmw:

Have you inserted the full path to the img?

Such as
#page {
background: url(http://mydomainonthe.web/images/bg.jpg) no-repeat center top;
}Give that a shot, and let us know.

lmw1
04-17-2011, 06:41 AM
Yep.

I can see it when I go to it in my browser.

But not when I code it in my CSS.

I'm stumped....

bullant
04-17-2011, 06:43 AM
if using relative paths (which I normally do as well) you have to have the correct starting point. See post 2

lmw1
04-17-2011, 06:44 AM
Tried every combination.

Nothing.

Leprkawn
04-17-2011, 06:45 AM
Can you give us your URL?

lmw1
04-17-2011, 06:46 AM
http://www.americanwebmakers.com/demo_college

bullant
04-17-2011, 06:48 AM
Tried every combination.


That's not true, because if you tried the correct one it would work :)

You haven't provided info regarding


You haven't specified where the images directory is in relation to the directory your web page is in.

If your css is in an external file, the relative path is referenced from the directory the css file is in.

so I can't help anymore. Your problem is a simple fix. You just need to know the start and end points (which you haven't specified) and then specify the correct relative path between them :)

Leprkawn
04-17-2011, 06:49 AM
Insert this:

#page {
background: url(http://www . americanwebmakers . com/demo_college/images/bg.jpg) no-repeat center top;
}

PS: I inserted the spaces so the URL would not get chopped.

lmw1
04-17-2011, 06:50 AM
Nope.

Nothing.

lmw1
04-17-2011, 06:52 AM
URL is above.

Path to image file is in the images folder (bg.jpg)

In the root all that's there is:

3 Folders (scripts, css & images)
and 1 index.htm file

That's all.

Leprkawn
04-17-2011, 06:54 AM
BTW, if you move everything out of the demo_college folder, make sure to fix that in the path when you do that.

lmw1
04-17-2011, 06:56 AM
I'm not moving anything out of that folder because that's the folder I'm making the website in.

I can't believe I'm stumped on this. Crazy!

Can't move forward until it's fixed though.

I appreciate you guys helping me. Let's figure this thing out.

bullant
04-17-2011, 06:58 AM
Your source code says


<link type="text/css" rel="stylesheet" href="css/main.css (http://www.codingforums.com/view-source:http://www.americanwebmakers.com/demo_college/css/main.css)" media="screen" />so there's your problem.

I've already posted how to fix it, assuming your file permissions are ok, so I'll leave it to you because I'm not into spoon feeding :)

Leprkawn
04-17-2011, 06:59 AM
Is this what your intent is?

I think your bg is for the entire Web page itself... not the div. If so...

/*

Client: College Watches Online
Description: Watch site for AN Enterprises
Development Company: American WebMakers www.americanwebmakers.com

Main Colors:
bg: #0f467c
text: #745459
dark brown: #251b17
light brown: #3b2c25
white: #e1dedb

*/


/* Main Generic Styles */

body {
margin: 0;
padding: 0;
background: #0f467c url(http://www.americanwebmakers.com/demo_college/images/bg.jpg) no-repeat center top;
}

#page {
width: 100%;
display: table;
}

Leprkawn
04-17-2011, 07:02 AM
Works fine for me here...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>College Watches Online</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<!-- Stylesheets -->
<!--<link type="text/css" rel="stylesheet" href="css/reset.css" media="screen">-->
<link type="text/css" rel="stylesheet" href="css/main.css" media="screen" />

<!-- Scripts -->




</head>


<body>
<div id="page">

<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<br /><br /><br />
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>











</div><!-- Close Page -->
</body>
</html>

/*

Client: College Watches Online
Description: Watch site for AN Enterprises
Development Company: American WebMakers www.americanwebmakers.com

Main Colors:
bg: #0f467c
text: #745459
dark brown: #251b17
light brown: #3b2c25
white: #e1dedb

*/


/* Main Generic Styles */

body {
margin: 0;
padding: 0;
background: #0f467c url(http://www.americanwebmakers.com/demo_college/images/bg.jpg) no-repeat center top;
}

#page {
width: 100%;
display: table;
}

lmw1
04-17-2011, 07:03 AM
No spoon feeding necessary I promise.

See the attached image of my file structure.

In every website I build in a demo folder the image path for my CSS files have ALWAYS been ../

Except today...

It's just one of those days I guess.

lmw1
04-17-2011, 07:08 AM
Leprkawn you figured it out!!!

I was trying to use "body" for my bg color and then lay the bg image on top of it with a div named page.

Got rid of the page div.

All works as it should now. *(and I changed the image path to ../ and it worked like a charm).

Moving forward.

THANK YOU SIR!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

lmw1
04-17-2011, 07:14 AM
Now it's in the body and I can't position the image.

lol

Leprkawn
04-17-2011, 07:14 AM
Works here as well...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>College Watches Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- Stylesheets -->
<!--<link type="text/css" rel="stylesheet" href="css/reset.css" media="screen">-->
<link type="text/css" rel="stylesheet" href="css/main.css" media="screen" />
<!-- Scripts -->
</head>
<body>
<div id="page">
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<br /><br /><br />
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
<p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p><p>blah blah blah</p>
</div><!-- Close Page -->
</body>
</html>

/*
Client: College Watches Online
Description: Watch site for AN Enterprises
Development Company: American WebMakers www.americanwebmakers.com
Main Colors:
bg: #0f467c
text: #745459
dark brown: #251b17
light brown: #3b2c25
white: #e1dedb

*/
/* Main Generic Styles */

body {
margin: 0;
padding: 0;
background:#0f467c;
}

#page {
background:url(http://www.americanwebmakers.com/demo_college/images/bg.jpg) no-repeat center top;
width: 100%;
display: table;
}
lol Glad it worked the first time! Yeah, I was wondering if you intended to put it in the div or the page itself. Glad I could fix it for you, and please do not call me "sir!" http://reaganator.com/comments/cool.gif

Leprkawn
04-17-2011, 07:17 AM
...And how do you want to position it?

lmw1
04-17-2011, 07:18 AM
I figured it out.

Thanks dude. (j/k)

Appreciate your time!

If you need any extra work from time to time PM me.

Leprkawn
04-17-2011, 07:19 AM
Cool beans, and congrats!

Leprkawn
04-17-2011, 07:26 AM
BTW... just to make it a little easier on the CSS code, all you need to do is this on one line:

background:#0f467c url(http://www.americanwebmakers.com/demo_college/images/bg.jpg) no-repeat center 200px;

lmw1
04-17-2011, 07:28 AM
You are the man!

Leprkawn
04-17-2011, 09:54 AM
Len:

Hey, not sure if you caught this, but you completely forgot the opening <html> tag for your page. http://www.reaganator.com/comments/doh.gif

lmw1
04-18-2011, 12:53 AM
Thanks!

Hey, do you know any javascript/jQuery?

I have a few issues.

Respectfully,
LMW1



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum