Diferent images in background top and bottom??? |
|
Brunna
|
Hi guys
Somebody can help me with this big problem (for me) i want put two different images in background image 1 at the top and image 2 at bottom .. I can't i try many examples with no sucess...
Somebody can help me?
Thank you so much
Regards
Brunna.
|
| |
Claire
|
Don't know if you have allreay tried this, but with CSS3 you can, allthough not (yet) supported by IE9...
(The below is quoted directly from here http://stackoverflow.com/questions/402200/layering-images-in-css-possible-to-put-2-images-in-same-element )
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
For the syntax you can choose between
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
background-image:url(..), url(..);
background-position:left top, left bottom;
background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
Attention! The following will create two backgrounds, even though you specified only one image url:
background-image:url(..);
background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
... Otherwise you'd have to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
|
| |
|
|