homepage Welcome to WebmasterWorld Guest from 54.226.192.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Background Image Not Showing Up
CSS Background Image Not Showing Up
potter2010

5+ Year Member



 
Msg#: 3557554 posted 5:57 am on Jan 25, 2008 (gmt 0)

Hi All,

I'm creating a website with a fixed width layout but a expandable height. I'm using CSS background images (that I sliced up in Photoshop) to place pictures around the content box. These images being the title banner, navigation and the four sides around the content box. I've been playing with the code and can get the title, navigation and footer to show up with no problem but where the two css background images should be on either side of the content is blank. These two bars on either side of the content I want to repeat to fit the size of the content but as I mentioned all I can get is two blank spots regardless of how much info I put in the content. I've only pasted the relevant parts of the code and taken alot of the work arounds that I've tried in an attempt to get this to work. Any help would be much appreciated.

My DocType:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

My CSS:
<style type="text/css">

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
color: #000000;
}

#container {
margin-right: auto;
margin-left: auto;
width: 750px;
background-color: #FFFFFF;
}

#header {
background-image: url('./images/layout/header.jpg');
height: 118px;
}

#nav {
background-image: url('./images/layout/nav.jpg');
height: 44px;
}

#topbox {
background-image: url('./images/layout/topbox.jpg');
height: 46px;
}

#leftbox {
background-image: url('./images/layout/leftbox.jpg');
background-repeat: repeat-y;
background-position: left;
float: left;
}

#content {
margin-left: 50px;
margin-right: 50px;

/*temp to see side bars repeat*/
height: 500px;

}

#rightbox {
background-image: url('./images/layout/rightbox.jpg');
background-repeat: repeat-y;
background-position: right;
float: right;
}

#bottombox {
background-image: url('./images/layout/bottombox.jpg');
height: 61px;
}

</style>

My HTML:
<body>

<div id="container">

<div id="header">
</div>

<div id="nav">
</div>

<div id="topbox">
</div>

<div id="leftbox">
</div>

<div id="content">
</div>

<div id="rightbox">
</div>

<div id="bottombox">
</div>

</div>

</body>

 

lavazza

5+ Year Member



 
Msg#: 3557554 posted 6:05 am on Jan 25, 2008 (gmt 0)

Try deleting the -image bits

e.g.

YES: background: url('./images/layout/header.jpg');

NO: background-image: url('./images/layout/header.jpg');

Madenio

5+ Year Member



 
Msg#: 3557554 posted 8:36 am on Jan 25, 2008 (gmt 0)

Yes the "background-image:" element was buggy for me too. Always use just the "background:" element.

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3557554 posted 10:03 am on Jan 25, 2008 (gmt 0)

Try deleting the -image bits

e.g.

YES: background: url('./images/layout/header.jpg');

NO: background-image: url('./images/layout/header.jpg');

Yes the "background-image:" element was buggy for me too. Always use just the "background:" element.

Both wrong.

Not only are these completely irrelevant to the problem, but they will also deprive you of a useful tool. The 'background' shortcut which allows you to define all properties of a background in one declaration is very useful, but it overrides the properties of any preceding 'background-*' declaration on the same element/class/id etc. This means that, for example, you could very economically set identical properties on several elements using the 'background' declaration, and then override any one of the background properties of any of those elements using one of the 'background-*' declarations.

However, to the problem of this thread:

Potter2010, the problem is that you've neglected something very basic about how floats work: namely that unless you specify the width of a float, its width will equal the width of its content [w3.org]. Given that the floats in your content contain no content, the floats have zero width and so are invisible.

Besides that, there are two things:

  1. Unless there's more CSS code, your layout isn't going to work [of course, you may have omitted the non-relevant code, in which case, thanks ;-)],
  2. Whether it works or not, your code uses at least one extra div--and probably two--in order to achieve the borders on the two sides.

To explain point 2, since your design is a fixed width, you could (a) just use a single background image the width of the entire container div and not concern yourself with the floated divs at all, (b) use two nested divs, each with its own background image (and presumably padding). Both ways get around the need for any floats at all.

--b

Marcia

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



 
Msg#: 3557554 posted 10:11 am on Jan 25, 2008 (gmt 0)

When you use relative addressing for images you have to use ../ not ./ - it needs two, not one.

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3557554 posted 11:37 am on Jan 25, 2008 (gmt 0)

When you use relative addressing for images you have to use ../ not ./ - it needs two, not one.

Again, this is wrong. First, it's not relevant: Potter2010's images are showing up in the other divs according to the first post.

Secondly, "./" is a relative link to the current directory (see e.g. Wikipedia [en.wikipedia.org] for more information). Relative paths in stylesheets must be relevant to the stylesheet itself, so as long as an image (or the directory it's in) is in the same directory as the stylesheet, there should be no problem.

--b

Edouard_H

10+ Year Member



 
Msg#: 3557554 posted 1:05 pm on Jan 25, 2008 (gmt 0)

Omit the single quotes enclosing the file path & name.

potter2010

5+ Year Member



 
Msg#: 3557554 posted 4:56 am on Jan 31, 2008 (gmt 0)

Thanks everyone for all the suggestions, they're all great! :)

I decided to go with Bedlam's suggestion of using a single background image instead of floating the side images. Simplicity at its best. And at 3kb the size of a 750px wide image is nothing. The best thing is it works! The only problem I'm having is that in Firefox and Safari (but not IE, who-da thunk it?) there's a small white space between the content background (#contentbg/#content) and the background of the div above (#topbox) and below (#bottombox) but only when there's text present. If I comment out the text and set a height to the content (#content) there's no white space but when I uncomment out the text back comes the white space. Any ideas?

DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
color: #000000;
}

#container {
margin-right: auto;
margin-left: auto;
width: 750px;
background-color: #FFFFFF;
}

#header {
background-image: url('./images/layout/header.jpg');
height: 118px;
}

#nav {
background-image: url('./images/layout/nav.jpg');
height: 44px;
}

#topbox {
background-image: url('./images/layout/topbox.jpg');
height: 46px;
}

#contentbg {
background-image: url('./images/layout/content.jpg');
background-repeat: repeat-y;
width: 750px;
}

#content {
margin-left: 50px;
margin-right: 50px;
}

#bottombox {
background-image: url('./images/layout/bottombox.jpg');
height: 61px;
}

HTML:
<body>

<div id="container">

<div id="header">
</div>

<div id="nav">
</div>

<div id="topbox">
</div>

<div id="contentbg">

<div id="content">

<!--end of content div-->
</div>

<!--end of contentbg div-->
</div>

<div id="bottombox">
</div>

</div>

</body>

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