PLZ PLZ HELP! :o) BG IMAGE'S!

BG images are a no-show

[ozweeder]

Hey guys...

Im a newbie and have created a site that all loads fine except for the Background image and also a background image of a table (.DivBlueBG) that is located 2/3 down the page.

all files are linked properly. ive tried deleting the ' marks. ive tried deleting the '../' marks as well.

i have no idea what the problem is. it looks fine in dreamweaver but when loaded in a browser the images dont show up

I would LOVE if you can figure this out for me.

Thanks in advance...
Oz

the problem area is located somewhere here I think:

}
body {
background: url('../body.new_bg.jpg');
background-repeat: repeat-x;
text-align: center;
font-size: 18px;
}
.DivBlueBG {
background: url('../tile_this.gif');
background-repeat: repeat;
}
.title4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
color: #FFF;
font-weight: bold;
}
#HeaderGreenText {
color: #0C6;
}
.greenbody {
font-size: 16px;
font-weight: normal;
color: #090;
}
.headingblack {
font-size: 24px;
font-weight: normal;
color: #000;
}
.headline1 {
font-size: 24px;
font-weight: normal;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
}
#Table1 tr td .headline strong {
color: #000;
}
.DivBlueBG1 {
background-image: url('../tile_this.gif');
background-repeat: repeat;
}

[edited by: tedster at 12:45 am (utc) on Oct 10, 2010]

[encyclo]

Welcome to WebmasterWorld ozweeder :) Rather than using relative links such as "../" you should look to reference the resource from the document root. For example, if the graphics are in a directory called "images" which is accessible as www.example.com/images/ then you should change your CSS to:

background: url('/images/body.new_bg.jpg');

[ozweeder]

Hi Encyclo!

Thanks for the reply..

Just tried that but didnt work either! :o(

the BG images dont seem to want to load at all.

[encyclo]

Can you view the graphics if you try to access them directly via the browser address bar? If the path appears correct, then other causes could be ad-blocking software mis-identifying your graphics as ads (dependent on image dimensions) or that the graphics are not uploaded correctly or are uploaded to the wrong location.

[Major_Payne]

If you want background images to show, be sure you set a width and height for the div/table to at least the minimum size of the background image if it doesn't repeat. If it repeats, then use the width/height you need.

Background Image Code:

For the body tag example:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}

That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.

For a tiled image, change to:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}

Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".