CODEWITHSUNDEEP
css
Bronzato
Bronzato

Reputation: 9362

Insert a shadow on a header image

I would like to put a shadow on the header image but it didn't work.

URL: http://testjeanschwartz.weebly.com/

I already try something like this: 

.wsite-background
{
  box-shadow: 0px 10px 5px #888888;
}

Putting a shadow is something I already did a lot of times but this one is not working.

Thanks.

Upvotes: 0

Views: 279

Answers (2)

Joe Kdw
Joe Kdw

Reputation: 2261

For background image, you need inset property to handle it with the position relative or absolute.

Try this one:

.wsite-background{
   position:relative;
   -webkit-box-shadow: inset 0px 10px 5px #888888;
   -moz-box-shadow: inset 0px 10px 5px #888888;
   box-shadow: inset 0px 10px 5px #888888;
}

Upvotes: 0

George
George

Reputation: 36794

Your box-shadow is covered by the elements that follow it (namely #main-wrap). You can change the z-index of your element to have it show 'above' other elements.

You will need to position your element something other than static for the z-index to be acknowledged:

.wsite-background {
  box-shadow: 0px 10px 5px #888888;
  position: relative;
  z-index: 1;
}

Upvotes: 1

Related Questions