CSS Background Help Needed

Neo824 · 02-02-2008

Hello, I'm having a bit of trouble with my background image in CSS. There is this one image that I would like to use as a background image, it is a gradient with stripes. I am having issues with doing so because I can not get the image to take up the entire page. Below is the image that I am trying to work with, the HTML file, and the CSS file.

Image:

HTML File:

Code:

<html>

<!-- Head -->
<head>
<!-- Title -->
<title>Neo Productions [HomePage]</title>
<!-- Stylesheet Link -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<!-- Body -->
<body>

</body>

</html>

CSS File:

Code:

/* Neo Productions [StyleSheet] */

/* Basic Styles */
body {
background: url('images/bg.png') repeat-x;
}

Any help will be greatly appreciated!

Thanks,
Neo

**tamlin** · 02-02-2008

Not quite sure what you mean. repeat-x will repeat the image horizontally, but if the image is shorter than the page, you'll get a gap below the image. repeat will repeat the image both horizontally and vertically, but if your image is not tileable, you'll get an obvious join.

CSS Background-repeat Property

Sorry if I've misunderstood your question.

Neo824 · 02-02-2008

Quote:

Originally Posted by tamlin

Not quite sure what you mean. repeat-x will repeat the image horizontally, but if the image is shorter than the page, you'll get a gap below the image. repeat will repeat the image both horizontally and vertically, but if your image is not tileable, you'll get an obvious join.

CSS Background-repeat Property

Sorry if I've misunderstood your question.

I think you misunderstand me, I want the image to stretch to take up the ENTIRE page. Regardless of the user's resolution. Do you have MSN? Maybe we could talk about it over it, my screename is Neo-824@hotmail.com

**tamlin** · 02-02-2008

I'm not an expert in CSS, but I don't think there's a pure CSS way to "stretch" a background image. Apparently, there is a "background-size" property in CSS3, but this is not currently supported in any browsers.

However, this link is to a fudge that seems to work:
FAQ - stretching a background image

Neo824 · 02-02-2008

Quote:

Originally Posted by tamlin

I'm not an expert in CSS, but I don't think there's a pure CSS way to "stretch" a background image. Apparently, there is a "background-size" property in CSS3, but this is not currently supported in any browsers.

However, this link is to a fudge that seems to work:
FAQ - stretching a background image

Do you have any idea how I could make this image tilable?

**tamlin** · 02-02-2008

Quote:

Originally Posted by Neo824

Do you have any idea how I could make this image tilable?

You're not going to be able to make any image with a gradient tileable. There are two tutorials on making seamless textures in the Tutorials section that might give you some ideas, however:

BioRUST.com :: Tutorials >> Seamless Textures
BioRUST.com :: Tutorials >> Advanced Seamless Textures

agentxi · 02-03-2008

yeah the gradient part is hard, but if you can make your stripes "tileable" then you can create an "overlay" effect for the gradient, and have 2 wrapper div's the outside div would have the stripes while the inside one would have the gradient overlay...

then i would make it partially transparent so that it does the "overlay" effect. try and avoid using png's for the gradient if you can, as this will mess up in ie6, although there are some hacks and javascripting that can help with forcing ie6 to see the png transparency's.

I've never actually tried this, but this is where i'd start to make it happen.

try a gif for the gradient and see what kind of quality you can make it have if not, then look into the complex world of making ie6 work with png transparency's

Jacorre · 02-04-2008

Take a look at my tutorial about repeating backgrounds with CSS. Doing a seamless gradient tiled background will be tough.