Member Avatar for jay.barnes

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
  • 4K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by webdesignindia2
Member Avatar for diafol

Are you using both of these together?

Member Avatar for hericles

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

Member Avatar for jay.barnes

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!

Member Avatar for hericles

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.

Member Avatar for jay.barnes

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

Member Avatar for hericles

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

Member Avatar for jay.barnes

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!

Member Avatar for webdesignindia2

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.