CSS Gradient Background

Butters

Butters

Butters

Permabanned
Joined
22 Apr 2007
Posts
1,805
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

backbx0.jpg
 
you could make a div thats 100% by 100% then float a div left and another right within the first div - that should work.
 
fini said:
I thought I should just add that it's also technically possible to do gradient backgrounds in CSS without any images - though practically a bit useless
Click to expand...

Yep you would have to specify each shade of colour for every line you have, if it were to scale you would have to use scripting/php/java or what not to scale it up.

Images are the best option and dont require dozens of line of code. As for the OP's dilema, one option is to create 3 column layout with the left/right columns being fixed width and the center one liquid. Scale the page up and left/right column remain the same, center column scales with page width.
 
I think MadMossy's suggestion is the better one.

Are the two graded columns part of the site [as navigation etc] or are they just bordering the central column? If the latter, you should center your site and then have the columns blend out into another colour that fills the background.
 
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!
 
Then you have done something wrong. Height forces the browser to display something at that height, regardless of the amount of text.
 
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.
 
hmm I think your best bet might be to make a 1pixel tall image of the two columns with the space in between (so looks like this []---------[] ) and then in a container div tile it vertically - it'll then stretch for the height of the div, which will be as tall as there's content for. Otherwise you could just a transparent single cell in as an image and set its proportions to 100%.
 
Done it:

doneitzk8.jpg


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.
 
If your going to use height: 100%; then i would suggest adding the following code too:

Code: 
html {
  width: 100%;
  height: 100%;
}

body{
  width: 100%;
  height: 100%;
}

T.
 
Butters said:
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.
Click to expand...

Not really sure what you're asking. #container and #content would just be ID's that you've specified yourself in the css. You could name them anything you want and they'd do the exact same thing as long as they've got the same css.
 
You must log in or register to reply here.
Back
Top Bottom