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

Dani AI

Generated

Nice catch, Jay. Two common issues converged here, and your thread is a good checklist for anyone seeing "body works, html is ignored" when moving CSS out of the page.

  • Paths are resolved relative to the CSS file, not the HTML/PHP file. From a styles/ folder, url(../images/...) or a root-relative url(/images/...) avoids surprises across pages. Verify in DevTools: Network tab should show the image with 200 OK. If you see 404, the path is wrong. As a quick cache-buster during testing, load cmhome.css?v=1 and hard-refresh.

  • A single stray or non-printable character can invalidate the selector before html { ... }. Common culprits: an accidental @, an unclosed /* comment, or a hidden BOM pasted above the rule. Run the stylesheet through a linter/validator and switch your editor to show invisibles. If the rule still will not parse, temporarily delete everything above it to isolate the offender.

Also note the painting order: if body has an opaque background color, it will cover the root background. When you intend the background image on the <html> element to be visible, make the body transparent so the root shows through:

body { background: transparent; }

A few durability tips:

  • Prefer one unprefixed declaration: background-size: cover; (modern browsers no longer need the vendor prefixes).
  • Consider a root-relative URL for sitewide assets:
    html { background-image: url(/images/ralnabg.jpg); }
  • In DevTools, confirm the rule is applied in the Computed panel and not overridden by another stylesheet.

Hericles’s path diagnosis and your follow-up about the stray character are exactly the right debugging sequence.

Recommended Answers

All 8 Replies

Member Avatar for Member #120589

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.