Welcome to WebmasterWorld Guest from 54.224.160.42

Forum Moderators: not2easy

Message Too Old, No Replies

Adding a background image

     
7:24 pm on Nov 18, 2011 (gmt 0)

New User

5+ Year Member

joined:June 14, 2011
posts: 10
votes: 0


CAN SOMEONE HELP? I'm new to CSS and having trouble with a very simple task. I'm trying to add a background image to my site. The current code doesn't have a line for displaying a background image so it defaults to white. Since I'm pretty new to editing CSS I'm not sure what code I need in order to tell it to load a background image.

The "new background" image will be-
named: MainBackground.png
located here: j:\App_Themes\Peacock\img

If you need to see more of the source code please visit the site: http://peacockpress.printnow.net/


Here is the current code as it is now:
--------------------------------------------
body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;
}

* { outline: none; }

:focus{ outline: none; }
9:23 pm on Nov 18, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:738
votes: 8


body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;

background-image:url('App_Themes/Peacock/img/MainBackground.png');

}
3:01 am on Nov 19, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


Note too-- I've been bitten by this more than once :( -- that relative links in the CSS are relative to the stylesheet, not to the page that calls the styles. It is probably safer to use a site-absolute link.

Matter of fact, I have been bitten by it so often that I went back and checked before clicking Submit ;) And then, er, hastily swapped two phrases.
6:00 pm on Nov 21, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


1. You don't need quotes either, although I have no example handy, they've caused some havok on some sites that was fixed by just removing them.

Also what happens if your background doesn't tile well, or incorrectly, or the viewport exceeds it's width? You need two control the position and repeat properties as well. Two examples:

/*shorthand*/

body {
background:url(/App_Themes/Peacock/img/MainBackground.png) top left no-repeat;
/* or for horizontal repeat:*/
/* background:url(/App_Themes/Peacock/img/MainBackground.png) top left repeat-x; */
}

/* longhand*/
background-image:url(/App_Themes/Peacock/img/MainBackground.png);
background-repeat: no-repeat;
background-position:top left;
}

Downside: see below . . .

2. Here is why the root-relative URL gets important:

[FROM ROOT]
css
images
about-us/our-team/index.html (even though you wouldn't need to specify index.html)
index.html

So from index.html, references in dot-toothpick syndrome syntax would be

images/file.jpg

From the css directory it would be

../images/file.jpg

from the our-team/index.html it would be

../../images/file.html

After a while it becomes tiresome, annoying, and error prone to keep track of all your dots and leaning toothpicks. For all of the above, you could just do

/images/file.jpg

The leading slash always starts at root. This way it's one less error to worry about, you can focus on other errors.

Another important aspect, if your site is dynamic and you use mod_rewrite, you may not actually be in the directory you expect. Given a typical example, but exaggerated for demonstration,

[FROM ROOT]

blog/index.php

Let's say you have a rewrite rule to manage friendly URL's,

ReWriteRule (.*) /blog/index.php?q=$1 [L,QSA]

So if you request "/about/our-team" it will direct to /blog/index.php, but your page output will still "think" it's at /about/our-team. So references to ../css/my.css won't work . . .but /css/my.css will.

The downside: Since your local computer is not a web server (unless you install local software to make it so,) it doesn't have a "domain root" so the leading slash won't work.

j:\App_Themes\Peacock\img

You'll have to make a local copy and mod it before uploading. Generally this isn't a problem, I use a search-and-replace function that nukes all the toothpicks prior to upload and replaces them with a single leading /.