Adding a background image to my css file

[Peter54]

Hi,
I found a template that I want to use. The index page has a link to 2 css files:
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="colours.css" />

I want to add a background.jpg for the template but do not know the css to add in order to do so. I will post the css of both files:
1) layout.css

body {
margin:0;
padding:0;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
}

.header {
width: 746px;
height: 68px;
border-style: solid;
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 0px;
margin: 0 auto 0 auto;
}

.header h1 {
margin: 0px;
background: url('logo.png') top left no-repeat;
}

.header h1 a {
display: block;
text-indent: -5000px;
text-decoration: none;
width: 746px;
height: 68px;
}

.mainmenu {
width: 746px;
height: 30px;
border-style: solid;
border-top-width: 0px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 0px;
margin: 0 auto 0 auto;
}

.mainmenu ul {
cursor: default;
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
}

.mainmenu li {
cursor: default;
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
line-height: 30px;
}

.mainmenu li a {
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
padding: 5px;
}

.content {
padding: 10px;
width: 726px;
border-style: solid;
border-top-width: 0px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
margin: 0 auto 0 auto;
}

.content p {
margin: 0px;
}

.content img {
float: right;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.content img.left {
float: left;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.content iframe {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

h1 {
font-size: 1.6em;
margin-bottom: 10px;
}

h2 {
font-size: 1.4em;
margin-bottom: 10px;
}

.minilinks {
text-align: center;
font-size: 0.8em;
}

.footer {
width: 746px;
height: 20px;
border: 0px;
margin: 10px auto 20px auto;
text-align: center;
font-size: 0.8em;
}

div.images {
margin: 0 auto;
text-align:center;
}

div.images img {
float: none;
margin: 0px;
}

2) colours.css

body, .footer {
/* OUTER BACKGROUND COLOUR */
background-color: #808080;
}

div {
/* CONTENT BORDER COLOUR */
border-color: #000000;

/* CONTENT BACKGROUND COLOUR */
background-color: #FFFFFF;

/* CONTENT TEXT COLOUR */
color: #000000;
}

.mainmenu {
/* MAIN MENU BACKGROUND COLOUR */
background-color: #000000;
}

.mainmenu li a {
/* MAIN MENU LINK COLOUR */
color: #FFFFFF;
}

.mainmenu li a:hover {
/* MENU MENU LINK HOVER COLOUR */
color: #FFFFFF;

/* MAIN MENU LINK HOVER BACKGROUND */
background-color: #FF0000;
}

h1 {
/* HEADER 1 COLOUR */
color: #FF0000;
}

h2 {
/* HEADER 2 COLOUR */
color: #0000FF;
}

.content a {
/* TEXT LINK COLOUR */
color: #0000FF;
}

.footer a {
/* FOOTER LINKS COLOUR */
color: #000000;
}

What would I need to change to insert the background.jpg into the css?

Thanks in advance for your help,
Peter

[D_Blackwell]

I want to add a background.jpg for the template but do not know the css to add in order to do so.

Strictly speaking either would be fine. However, colours.css does have a defined background-color: - This is important because the background-color will render before the image. Ideally, you should declare a background-color: with a background-image: - Select a matching or complementary color. This way, if the image is 'late to the party', there will be much less POP to the eye, if a closely matching background-color: is already in place.

1) I would put it in the second sheet. Two, I would change the background color as appropriate:

2) I would add html to the list and remove .footer - separating .footer from the delcaration. Leaving out html can sometimes cause some strange rendering.

html, body {
background: $#08080 url(images/image.jpg);
}

.footer {
#808080;
}

Frankly, I don't really care for this second stylesheet and would fold into one. I see where they are going, but both sheets together are a small file. I see no need to separate in this case.

[Peter54]

D_Blackwell,
Thanks for your reply.

I added background: $#08080 url(glossymetal.jpg); and

background: $#08080 url('glossymetal.jpg');

but neither brought up the background image. The image is in the same folder as the all of the other files.

Peter

P.S. Adding html, body {
required me to change
font-size: .8em; to font-size: .9em;

[D_Blackwell]

I apologize for my typ0 in the sample. Just another reason to ALWAYS validate your markup. Validated code prevents and fixes a lot of problems.

W3C (X)HTML Validator [validator.w3.org]

W3C CSS Validator [jigsaw.w3.org]
......................

html, body {
background: $#08080 url(images/image.jpg);
}

.footer {
#808080;
}

You can clearly see that the $ is a typ0. Hex colors are preceded by only a hash # - as in #faebd7;

Remove the $

This is correct:
background: #08080 url(glossymetal.jpg);
......................

No surprise that taking html into account could require some adjustments. I would typically set font-size: for html, body at 100%; and make changes from there if needed. Could prevent problems later if the site changes and the base font-size: is .8 or .9em - Personal choice.

[Peter54]

D_Blackwell,

I hate to say it but this did not resolve the problem. Can't think of what to do next. I checked and rechecked the path to the image and even put it in an images folder as you initially suggested but still it's not working. Any ides?

Peter

[D_Blackwell]

Good grief. I am multi-tasking way too many files at one time on too many projects.

Another typ0 - Hex codes require six characters (or three if shorthanded). The provided edit is wrong.

background: #08080 url(glossymetal.jpg);

Correct is:
background: #808080 url(glossymetal.jpg);

However, this one is on you for quitting too easily and not validating the code like you should have. It would have failed the CSS and you would have found the problem.

So - still a good lesson.

[Peter54]

D_Blackwell,

Thank you it's working! And I will check my code now that I know it can be done from the desktop.

Peter

[rocknbil]

This is great for a CSS file in the domain root, but as your site grows, you will want to organize the files for ease of maintenance.

In the interest of maintaining an organized file structure, note that the location of background images are relevant to the css file:

index.html
css/your.css
images/background.jpg

For Javascript, files referenced by an external Javascript function are relevant to the file requesting the Javascript - but the below will resolve confusion for JS as well.

So for index.html, or really, any page using your.css,

body { background: #000 url(/images/background.jpg) top left repeat-x; }

The leading slash means "start at document root." It's a bad habit (IMO) to use relative paths:

body { background: #000 url(../images/background.jpg) top left repeat-x; }

because this could lead to a confusing set of these that can cost you time.

templates/template5/css/your.css
templates/template5/images/background.jpg

body { background: #000 url(../../../images/background.jpg) top left repeat-x; }

The first solution allows your css to be anywhere on the system as it always starts at document root.