Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Repeating background image vertically and horizontally

Status
Not open for further replies.

jeellison

IS-IT--Management
May 29, 2002
78
GB
Hi Everyone,

Just learning CSS and have spet too long on this simple task already.

I want a fading background to be displayed so there is no white space on larger higher resolution screens.

I have created a 1px width and 581 high pixel which needs to epeat across the screen horizontally and then a 1 px height image to then continue vertically below this.

This only works when I set the height in the css and the following doesnt.


/* CSS Document */

#header{}

#body_bg_x{
background-image:url(images/bg_1px.jpg);
background-repeat:repeat-x;
}

#body_bg_y{

background-image:url('images/bg_1px_y.jpg');
background-repeat:repeat-y;
}



<html>
<head>
<link href="rosevalley.css" rel="stylesheet" type="text/css">
<title>Rose Valley Web Design</title>

</head>

<body>
<div id="body_bg_x"></div>
<div id="body_bg_y"></div>
</body>
</html>

Can anybody help please?

Best Regards
James
 
Just use the one image that tiles horizontally, then make the background color for the page the color of your 'fade' image. It will blend seamlessly.

Otherwise, if you do not set a height, the second div will only be as tall as its content.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Ah, yes, how simple.

Thanks you very much.

James

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top