CODEWITHSUNDEEP
css
user194076
user194076

Reputation: 9017

Repeated background overlapping

I have a background pattern which can be easily repeated. The problem is i have a shadow to the bottom of the background and to the right of the background. How do I repeat such an image? I thought I can probably cut the piece from the right and overlap that right shadow. Or using whole image is the only solution?
enter image description here

Upvotes: 1

Views: 926

Answers (2)

Sotiris
Sotiris

Reputation: 40066

My suggestion is to use box-shadow css property to apply the shadows for your element instead repeat an image for the shadows also. You can use the following to make the shadows like your example:

-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */

Of course, as you see these properties doesn't support internet explorer 8 and below but you can use css3pie, a script that bring you some css3 properties to internet explorer. Is something that I often use.

Example: http://jsbin.com/iquso3

An alternative is to use a jquery solution from the many that exist.

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

For a background, using a whole image is the only solution, so you'll need separate images to do this on a flexible sized box.

You can probably keep the html and add the shadown using css, or by dynamically inserting extra divs using javascript/jquery.

Upvotes: 0

Related Questions