Welcome to WebmasterWorld Guest from 54.163.40.152

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Background Image Not Showing Up

CSS Background Image Not Showing Up

     

potter2010

5:57 am on Jan 25, 2008 (gmt 0)

5+ Year Member



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

6:05 am on Jan 25, 2008 (gmt 0)

5+ Year Member



Try deleting the -image bits

e.g.

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

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

Madenio

8:36 am on Jan 25, 2008 (gmt 0)

5+ Year Member



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

bedlam

10:03 am on Jan 25, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:11 am on Jan 25, 2008 (gmt 0)

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



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

bedlam

11:37 am on Jan 25, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:05 pm on Jan 25, 2008 (gmt 0)

10+ Year Member



Omit the single quotes enclosing the file path & name.

potter2010

4:56 am on Jan 31, 2008 (gmt 0)

5+ Year Member



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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month