The perfect background... in CSS -...

User 2168940 Photo


Registered User
49 posts

Hi Everybody,

I'm missing a CSS point here, trying to put background parameters in a CSS file, and the background parameters followed in each successive web pages.

These two scripts down below make it work, but only if either one or the other is contained in the <head> </head> statements. The pages display very nicely. But if I save the CSS code part in a separate CSS file, they backgrounds won't display.

Seems to me that the <html> tag, or the <body> tag should trigger the background display. Basic CSS, right? What am I missing?

Thanks,

-Paul-


<head>
<style type="text/css">

html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
or,

<head>
<style type="text/css">

body {
height:100%;
width:100%;
text-align:center;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-image:url('images/bg.jpg');
background-repeat: repeat-x;
}

</style>
</head>


User 187934 Photo


Senior Advisor
20,247 posts

The background image for the background needs to be referenced from it's position in the directory when compared to the style sheet not the actual html page.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 38401 Photo


Senior Advisor
10,951 posts

also be sure to remove the style and head tags from the top and bottom when you put your styles into a CSS file. No tags are needed in there at all just the CSS styles themselves.
User 2168940 Photo


Registered User
49 posts

Thanks Eric and Jo Ann,

The tags are gone in the CSS file, Jo Ann. Now its just body { line;line;line }

I was more wondering why the html page wasn't doing what I wanted it to do.... Blasted thing was as doing what I told it to!

Eric actually called it!

No way was I gonna notice that, much less even "suspect it". Not until I sweated out a lot more equity! I think that was a "good catch" on your part.

I had to read it through a couple of times before the lamp actually turned on, but the solution was right there. On the other hand, it was done in less than 25 words. (And it's something I need to practice when I wanna get fancy)

CoffeeCup has a very interesting crew here...

Thanks guys'

-Paul-


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.