CSS Gradient Background

Butters · 3 Dec 2007 at 19:23

I want a CSS gradient background with the image to appear like a left and right margin but I'm not sure how to make it so that it works on all screen widths.

A container in the middle and left and right margins that fade to the edge of the screen in their respective directions.

I have created an image but I always get huge white space to the right of the right fade.

a la

Butters · 3 Dec 2007 at 22:07

Arrgh! No, this isnt working! help

heres the CSS

Code:

body {
	margin:0; 
	padding:0;
	}

	
#left {
	float:left;
	width:150px;
	margin:0; 
	padding:0;
	background:url(images/leftbar.gif) top right no-repeat;
	}

#right {
	float:right;
	width:150px;
	margin:0; 
	padding:0;
	background:url(images/rightbar.gif) top right no-repeat;
	}

#middle {
	margin:0 150px;
	padding:1px;
	background:#EEE;
	}

and html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>



<body>

	<div id="left">
		
		
	</div>

	<div id="right">
		
		
	</div>

	<div id="middle">Some text here
		
		
	</div>

</body>
</html>

Ok, in IE7 you can see all 3 columns but the left and right columns only move down if there is text in them which is useless. In FF the left and right columns dont show unless there is text in them. It doesnt even work if I change the repeat to repeat-y.

Crap!

Butters · 3 Dec 2007 at 22:14

doesnt work

Butters · 3 Dec 2007 at 22:22

I dont think it does does it? Specifying a 100% height is allowing the browser to wrap to text. Only if I specified a pixel amount should it work, but it doesn't.

If I add height 100% to all of those 3 divs nothing happens. Perhaps you can try it and see?

Regardless, FF wont show the background images of left and right columns unless text exists.

Butters · 3 Dec 2007 at 22:54

Done it:

I created an image 50 pixels high and 1024 wide made up of 3 layers then mergerd.

This is then set in the background and the main container is set to 100% but the background body has set widths. There should be enough of the image behind the container to cover most screen sizes and its blue anyway so only on the largest screens will white space appear. (hopefully).

One thing confusing me. In CSS there is an active difference between #container and #content. Does anyone know why? Leave all formatting the same but just change the name between content and container. The whole site changes.