with 2 backgrounds using css sprites

Question

my question looks a little bit crazy but, can i make such a thing as the shown below in this picture, am thinking of too many possibilities
i am 100% aware that i can do :

<div id="TheContenaire">
<div><div> <!--this is where i can put a background image or a gradient style using css-->

<div></div> <!--the same thing with this div-->
</div>

but can i do this with just one div (TheContainer) and apply two backgrounds for it using css sprites and just one image ? put it on top, then again on bottom and rotate it
or any other manipulation

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

If you use linear-gradient then there is no need for layered elements: http://jsfiddle.net/e8gyb/

To layer something without another element use :after

div {
    position: relative;
}
div:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

A good article on gradients: http://css-tricks.com/css3-gradients/
Some more demos: http://css-tricks.com/examples/CSS3Gradient/

Edit: that will work on IE10+, for IE6-9 you will need to use :after with this: CSS gradient, transparent colors in IE?

edited May 23 '17 at 11:50

Community

1
1

answered Aug 02 '13 at 16:09

Michael Lawton

1,460
1
14
25

i think boxshadow gives the same effect as for linear-gradient but it's more practicable because you don't have to bother yourself with browsers compatibility – amine dimaana Aug 02 '13 at 16:21
1

`box-shadow` works with IE9+, `linear-gradient` with IE10+ unless you use `:after` with `filter` and `-ms-filter` which will give full support from IE6+ – Michael Lawton Aug 02 '13 at 16:27

score 0 · Answer 2 · answered Aug 02 '13 at 16:13

HTML

<div></div>

An inset shadow option:

div {
    height: 500px;
    width: 500px;
    box-shadow: inset 0 4em 7em -4em #000000,
                inset 0 -4em 7em -4em black;

}

DEMO

Or with background-image and gradient:

div:before {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    top: 0%;
    min-width: 100%;
    min-height: 3em;
}

div:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
    top: 100%;
    min-width: 100%;
    min-height: 3em;
}

DEMO

Obviously you'll have to use whichever vendor prefixes are required for your implementation.

with 2 backgrounds using css sprites

2 Answers2