0

I'm working on implementing CSS on my site, and have a problem with using a background image. When I use the background image inline in the PHP file, as below:

<style>
html{ 
  background: url(images/bgimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  font-size:16px;
  color:#ffffff;
}
</style>

The background image displays properly. However, when I use a separate CSS file, containing:

html { 
  background: url(images/ralnabg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body{
background-color:#0000ff;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:16px;
color:#ffffff;
}

The PHP page ignores the 'html' selector of the code, but does implement the 'body' selector, and I haven't been able to figure out why. I have this problem, regardless of whether I use Internet Explorer, Firefox, or Chrome.

Thanks for any suggestions you may have!

-Jay

4
Contributors
8
Replies
28
Views
3 Years
Discussion Span
Last Post by webdesignindia2
0

Hi diafol - I'm not using both the inline and the reference to the external file - I was just trying both to see what results I get, and to help identify why the external style doesn't load (my preferred method)

hericles - my CSS is in a 'styles' subdirectory from my root. My PHP files are located in the root directory. At the same time, when I use the reference to the CSS file, the "body" selector without a problem, but it ignores the "html" selector, entirely.

When I'm using the external CSS file, my PHP looks like:

<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/cmhome.css">
<TITLE>CM V2.0</TITLE>
</HEAD>
<BODY>
Words
</BODY>
<HTML>

I'm keeping the file about as simple as I can, just to troubleshoot this CSS issue.

Thanks for your input!

1

I doubt your image dir is inside your styles directory in that case.
Change to
background: url(../images/ralnabg.jpg) no-repeat center center fixed;

You need the ../ to revert out of the styles folder and locate the images folder.

0

You know? I wish I had thought of that, just on principle.

Unfortunately, though, it did not work...

Along that same line, I tried using the absolute path to the JPG, but, no success..

A good suggestion, though- that made total sense to me...

1

OK, as a test, can you alter the html property in the css file so the background image isn't a part of it, change the colour instead. That way we'll know if the image is the issue or the html selector itself.
Of course, strip the color from the body selector too...

0

Ah, that seemed to break the logjam...

I changed removed the 'body' attribute, and added the background color to the 'html' attribute, and found that that, as well, wouldn't take.

It turned out that I had a stray character before my 'html' attribute name. I removed it, and the background image loaded properly.

It looks like it was a combination of the lack of "..\" in the image path, and that stray character throwing off the CSS.

Thank you, hericles and diafol, for your assistance in figuring this out!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.