CODEWITHSUNDEEP
htmlcss
Zach Smith
Zach Smith

Reputation: 5674

How Should I Display This Background Using CSS?

When doing a background in css I am usually just using a gradient background that starts at the top, then eventually ends a solid color. So I slice up a thin layer of the gradient, repeat-x, then have the background set to a certain color 

(background:#color url(image location.png) repeat-x)

However I am faced with a unique obstacle I need guidance on. I have the following:

  1. Background is a gradient
  2. However there is also a background image that is repeated
  3. Said background image is repeated until the end of the page
  4. See the image screenshot from the side of the mockup (http://www.petpinpoint.com/sidebar.png)

Thoughts on how I would implement this? I can't just slice it and repeat since the background needs to span the entire height of the page (which is dynamic and change).

Upvotes: 1

Views: 280

Answers (5)

Eduardo Molteni
Eduardo Molteni

Reputation: 39413

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]-->

Upvotes: 3

BalusC
BalusC

Reputation: 1108692

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).

Upvotes: 1

Matt
Matt

Reputation: 3802

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.

Upvotes: 0

stephenhay
stephenhay

Reputation: 2874

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.

Upvotes: 0

pkaeding
pkaeding

Reputation: 37633

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.

Upvotes: 0

Related Questions