CSS Forum

**pjb007** · 02-13-2006, 02:03 PM

I have used the float function and have a page layout that works.

To center the image it is set as a none repeating background, this is done as the menu makes the image go off center, putting it as a background solves this problem.

The page has a footer which at the moment appears over the background image, it won't clear it.

It is possible to clear a background image in css?

I have only used float and clear once before and then I did not used a footer, so I did not have this problem.

**karinne** · 02-13-2006, 02:31 PM

Before your footer add

HTML Code:

<br style="clear: both;" />

**pjb007** · 02-13-2006, 02:36 PM

Nope that don't work!

I did try that even though the CSS is in a seprate file.

**karinne** · 02-13-2006, 02:45 PM

do you have a link then?

**pjb007** · 02-13-2006, 02:52 PM

No Sorry.

HTML File - some HEAD content removed

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>TITLE REMOVED</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />

<meta name="generator" content="NoteTab Light 4.91" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="content">


<class id="header">
<h1>Website Title</h1>
<hr />
</div>

<div id="menu">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>

</ul>
</div>

<div id="footer">
<h2>
<hr />
Footer goes here
<hr />
</h2>
</div>


</div>


</body>
</html>

And the CSS file

Code:

p {
color : black; 
font-family : verdana, "times new roman"; 
} 

h1 {
font-family : verdana, "times new roman"; 
} 

a {
text-decoration : none; 
font-family : verdana, "times new roman"; 
} 

a:link {
color : #f5deb3; 
} 

a:visited {
color : #f5deb3; 
} 

a:hover {
text-decoration : underline; 
color : red; 
} 


#menu {
background-color : #008000;
float : left; 
clear : both;
} 

#main {
margin-left : 250px; 
} 

h1 {
text-align: center;
font-family : verdana, "times new roman"; 
} 

h2 {
clear : both;
text-align: center;
font-family : verdana, "times new roman"; 
} 

body {
background: #f5deb3 url('folder/file.gif') no-repeat fixed center; 
}
 
hr {
width:80%;
}

#footer {
clear: both;

**karinne** · 03:19 PM

OK... well... depending on the resolution, you can't really fix the footer thing over the background the way you have it set up as a background to body { }

I would one div with the image as a background then have menu divs floating over that one.

something like

CSS

HTML Code:

p {
color : black; 
font-family : verdana, "times new roman"; 
} 

h1 {
font-family : verdana, "times new roman"; 
} 

a {
text-decoration : none; 
font-family : verdana, "times new roman"; 
} 

a:link {
color : #f5deb3; 
} 

a:visited {
color : #f5deb3; 
} 

a:hover {
text-decoration : underline; 
color : red; 
} 


#menu {
background-color : #008000;
float : left; 
}

#main {
margin-left : 250px; 
} 

h1 {
text-align: center;
font-family : verdana, "times new roman"; 
} 

h2 {
clear : both;
text-align: center;
font-family : verdana, "times new roman"; 
} 

body {
background: #f5deb3; 
}
 
hr {
width:80%;
}

#footer {
clear: both;
}

#wrap {
  background: url('folder/file.gif') no-repeat fixed center; 
}

removed the "clear: both" you had for #menu

HTML

HTML Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>TITLE REMOVED</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />

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


<class id="header">
<h1>Website Title</h1>
<hr />
</div>

<div id="wrap">

<div id="menu">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>

</ul>
</div>

</div>

<div id="footer">
<h2>
<hr />
Footer goes here
<hr />
</h2>
</div>


</div>


</body>
</html>

**pjb007** · 02-13-2006, 03:54 PM

That seems to have worked but the image won't display at all.

Will look again later.

**pjb007** · 02-13-2006, 04:01 PM

No image just won't display at all.

Using your exact code above (only change I made was the image name back to the orignal file)

**pjb007** · 02-14-2006, 07:19 AM

Any ideas anyone, image just won't display using code in #6

**chrishirst** · 02-14-2006, 09:08 AM

the div with the image has no height so how would you see the background?

Put borders on it to see where it is and how big it is(n't)

**pjb007** · 02-14-2006, 01:32 PM

The image is set in the Style Sheet

Code:

#wrap {
  background: url('folder/file.gif') no-repeat fixed center; 
}

**chrishirst** · 02-14-2006, 04:01 PM

yep it is, still doesn't have a height.

**angele803** · 02-14-2006, 10:12 PM

When you have a background image, you either have to set a height, or you have to have some kind of content in the div for the image to show up. It took me a while to figure that one out.

**pjb007** · 02-17-2006, 09:20 AM

Excellent

I have put a height tag in.

Seems to be working now.

If I set height in the CSS to 50% will that center it on any screen res?

**pjb007** · 02-17-2006, 10:26 AM

Problem is it won't work in FireFox!

It does in IE though perfect.

**karinne** · 02-17-2006, 10:33 AM

Do you have this online now? It would really help