ansaurus

Question

How Should I Display This Background Using CSS?

Answer 1

A:

What if you applied the gradient background to the html element, and the repeating image to the body element? Does the repeating image have a transparent background, so the gradient will show through?

I haven't tested this idea, and it may have issues with older versions of IE (which didn't handle transparency very well), but it may be worth investigating.

pkaeding 2009-11-12 16:02:31

so just make a css div that holds one image, and the body background holding another image?

HollerTrain 2009-11-12 16:05:44

Yes, I think that should work. make the div encapsulate all the content, and give it the repeating background. Let me know how it turns out, and don't forget to test in different browsers, since I suspect they may deal with this differently.

pkaeding 2009-11-12 17:27:13

Answer 2

A:

You could set the background-color of the page/body to the bottom color of the gradient. Make the gradient as high as you need, and only repeat-x, not y. Then when the page gets higher than the gradient background, it just fades to the background color, which continues indefinitely.

stephenhay 2009-11-12 16:02:54

Answer 3

A:

So you have 2 different backgrounds? You could merge them together using photoshop or fireworks. Then use the single background in the css repeated as you need.

Matt Joslin 2009-11-12 16:03:28

i don't think i can use a single background image to repeat. if i did the gradient would repeat. gradient on top, another image repeating at the bottom.

HollerTrain 2009-11-12 16:06:21

you could use the single image as the background with an x-repeat. stop the y-repeat and use the colour of the gradient as it finishes as the background colour as @stephenhay has suggested.

Matt Joslin 2009-11-12 16:10:10

Answer 4

+1 A:

If you want two backgrounds, then you need two block content elements of full width and height. On the first (the <body>) you set the gradient image as background. On the second (the first <div> element of the <body>) you set the repeated image as background. Only thing you need to make sure is that the repeated image has a transparent background on its own (you can do this with gifs and pngs).

BalusC 2009-11-12 16:06:51

Giving the repeated image a transparent background can be tricky. GIFs do OK for this if you put them over a solid color background and make the GIF with that background in mind, so that the edges of the image "blur into" the background color appropriately. A gradient will cause problems with this. A PNG, on the other hand, can "blur into" partial transparency, so it looks great on any background. But they're not supported by IE6 and below.

Nathan Long 2009-11-12 16:16:01

Answer 5

+3 A:

You need two backgrounds with, but the gradient should be a semi transparent PNG

html {
    background: #E6E6E6 url(/content/images/figure.png) repeat scroll 0 0;
    height:100%;
    width:100%;
}
body {
    background: transparent url(/content/images/gradient.png) repeat-x right top;
    height:100%;
    width:100%;
}

Edit: for the always present IE6,

<!--[if lt IE 7]>
body {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/images/gradient.png',sizingMethod='scale');
}
<![endif]-->

Eduardo Molteni 2009-11-12 16:11:20

Be aware that semi-transparent PNGs have issues in IE6 and below.

Nathan Long 2009-11-12 16:13:02

won't the .png fix for IE6 work?

HollerTrain 2009-11-12 16:16:23

ie6 don´t support alpha transparency nativly.

anddoutoi 2009-11-12 16:17:49

The .png fix for IE6 works fine, don't worry.

Eduardo Molteni 2009-11-12 16:21:12

which one of the divs will be on top of the other? will body be on top of html, or the other way around? I'm experimenting with this concept now, almost finished :)

HollerTrain 2009-11-12 17:01:08

The body on top of the html. I have used the method with great success.

Eduardo Molteni 2009-11-12 17:03:36

ok cool. almost there :) i'll muck around with it, but that does help.

HollerTrain 2009-11-12 17:07:49

ansaurus

tags:

views:

answers:

How Should I Display This Background Using CSS?

related questions