homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Adding a background image
BRoberson1657



 
Msg#: 4388641 posted 7:24 pm on Nov 18, 2011 (gmt 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; }

 

Hoople

10+ Year Member



 
Msg#: 4388641 posted 9:23 pm on Nov 18, 2011 (gmt 0)

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

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

}

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4388641 posted 3:01 am on Nov 19, 2011 (gmt 0)

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.

rocknbil

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



 
Msg#: 4388641 posted 6:00 pm on Nov 21, 2011 (gmt 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 /.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved