Background image repeat

[Atomic Justice]

Ok.. Maybe I'm making this really complicated but my only intention is to save on bandwidth and not use a full fixed background.

So, here goes:

I have an image I'd like to repeat from left to right. It's 5px wide by 1000px tall. The upper portion is a texture and fades to a solid color 3/4 the way down. Now, should the page height exceed the images height I'd like for a solid background color to come into effect down the rest of the page when scrolling rather than the image repeat itself on another row.

Possible? Basically it'd be a 'fixed repeat-x' in a sense, but that doesn't seem to do it.

Thanks..

[edited by: Atomic_Justice at 2:20 pm (utc) on Jan. 25, 2009]

[jbinbpt]

I use multiple length background images. On the pages that need the longer one, I use it.

[Atomic Justice]

That makes sense too.. Thanks

[swa66]

First of all: a larger sized image with a solid color will hardly make the (compressed) image larger to transmit.

You can apply both a solid color and an background image, the solid color will be used outside of the area the image occupies.

Aside of that whats the code you're having trouble with ? In what browser ?

Are you using a fixed background attachment ? Many errors we see with that are that the background image is positioned against the viewport, not the element it is applied to.

[w3.org...]
has an example of what you seek:

body { 
 background: red url("pendant.png");
 background-repeat: repeat-y;
 background-attachment: fixed;
}

the solid color to fill those places the image doesn't (red)
the repeat on on axis
the fixed attachment

Note it's applied to the body: this helps prevent a lot of the confusion with fixed attachment.

[Atomic Justice]

After attempting your code it still doesn't want to display correctly in Blogger. I see you noted it must be applied to the body. I cannot do that since I'm using a background for my header area and a wrap for the rest. It's all good though. I'm just going to resort to a repeat image.

I appreciate the time for the advice here. I will remember this as a reference.

What I was attempting at first was: #333333 url(img) fixed repeat-x;

I was close :)

Thank you