Hi. I'm trying to better understand how to use 'background'.
(A) - What I'd hoped to do was...
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...
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...
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%;) 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.
In [CSS3 you can apply [URL="http://www.w3.org/TR/css3-background/#layering"]multiple background images](http://www.css3.info/preview/multiple-backgrounds/) to an element and that incudes gradients. So to combine an image and a gradient you could do this:
background-image:url(img.gif), -moz-linear-gradient(top, black, white); /* FF3.6+ */
You'd need to repeat the rules for other vendor extensions of course.
Thanks O' B... that works a treat, I'd almost given-up thinking it could!
This topic is now closed. New replies are no longer allowed.