Background with color, gradient, and image?

HTML & CSS
1

Hi. I’m trying to better understand how to use ‘background’.

B - What I’d hoped to do was…[/B]

1). Have a fall-back colour if the following gradient failed.
2). A gradient.
3). A non-repeat image… positioned say left top.
4). And maybe a second non-repeat image at say ‘right bottom’.

Maybe it is impossible?

B - Searching around a bit I found some code and made some alterations that would allow…[/B]

1). Have a fall-back colour if all else failed.
2). A repeat background image as another fall-back.
3). A gradient.

Here’s the code…


div {
height: 300px;
width: 300px;
  
background: red;
background-image: url(1.png); /* fallback */
  
background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(white)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, black, white); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, black, white); /* FF3.6+ */
background-image: -ms-linear-gradient(top, black, white); /* IE10 */
background-image: -o-linear-gradient(top, black, white); /* Opera 11.10+ */
background-image: linear-gradient(top, black, white); /* W3C */
}

I guess with that code (B), I could then add some relative or absolute positioned images but then they wouldn’t be in the background but in or over and added content.

The only way I can think to accomplish (A) is to first do (B) in the main wrapper… then add an inner wrapper/div (width: 100%:wink: in which to place my background images… these would be over the gradient in the wrapper, but under any additional content placed in the ‘inner wrapper/div’…

background-image: 1.png, 2.png;
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;

Any thoughts or comments to assit me in better understand ‘background’ could be greatly appreciated.

Cheers, Karl.

2

HI,

In CSS3 you can apply [URL=“http://www.w3.org/TR/css3-background/#layering”]multiple background images to an element and that incudes gradients. So to combine an image and a gradient you could do this:


div {
	height: 300px;
	width: 300px;
	background: red;
	background-image:url(img.gif);
	background-image:url(img.gif), -moz-linear-gradient(top, black, white); /* FF3.6+ */
	background-repeat:no-repeat;
}

You’d need to repeat the rules for other vendor extensions of course.

3

Thanks O’ B… that works a treat, I’d almost given-up thinking it could! :slight_smile:

Regards, Karl.