Gradient background image problems

**labeeb100** · 06-22-2012 01:02 PM

I want to use an image with gradient as a background I made the following code.Problem with this code is this that background is not covering all the content, please help me to fix this problem.

<html>
<style type="text/css">
body
{margin:0 auto;
width:790px;
background-image:url('1.jpg');
background-repeat:repeat-y;
}

</style>
<body>

<h1>
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!
hello world!!

</h1>

</body>

</html>

**cbVision** · 06-22-2012 05:02 PM

Can't do anything without seeing the image. Attach the image file or post to a server so we can see it.

**rtrethewey** · 06-22-2012 11:15 PM

I suspect that what you're seeing is that the background image is only drawn behind the content of your <h1> tag. And since that's the total content of the document, that would be correct. An HTML document does not, by default, expand to fill the entire browser window unless your CSS settings specify it. Add 'height:100%;' to the style for the <body> tag and you may see the effect you want. And don't forget to add a complete <!DOCTYPE> statement to ensure cross-browser compatibility.

**Major Payne** · 06-23-2012 01:33 AM

Try:

Code:

<style type="text/css">
body {
width:790px;
height: YYYpx; /* optional if content isn't enough */
margin:0 auto;
background: #fff url('1.jpg') repeat-y top left scroll;
}
</style>

Need to set a width and height if there is not enough content to expand background (BG) image to where you want it. The BG image is only in the vertical so assume it is a gradient sliver with a width of 790px.

Thread: Gradient background image problems

Thread Tools

Display

Gradient background image problems

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions