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

Member Avatar for diafol

Are you using both of these together?

May be obvious but need to ask: is your CSS file in the same directory?

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!

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.

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...

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...

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!

you dont used inline css that give the problem...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.