CODEWITHSUNDEEP
htmlcss
michaliv
michaliv

Reputation: 1

Shadows sticking to sides of the site

I would like to put shadows to both sides of my site as you can see here - http://www.oztrik.sk/wp-content/uploads/2012/01/trik.jpg

I thought of putting them into left and right divs with width:100%; and height:auto; as background images, repeat-y.

#left { background:url('../img/shadow_left.png') left center repeat-y; width:100%;     height:auto; float:left; }
#right { background:url('../img/shadow_right.png') right center repeat-y; width:100%; height:auto; float:right; }

The problem is when the width of the content div is bigger than the browser window size, the shadow stays stuck to the right side of the window and not to the right side of the page. When I put it to auto, the problem comes back the other way around.

Also, when the page is zoomed out, the shadow ends with the end of the content.

Any ideas how to solve it? Thank you!

Upvotes: 0

Views: 64

Answers (1)

Ansel Santosa
Ansel Santosa

Reputation: 8444

I would recommend creating the shadows in CSS rather than with images like in this Fiddle:

body {
    box-shadow: inset 100px 0 100px -100px #000,
                inset -100px 0 100px -100px #000;
}

For help with solving your specific implementation, please provide a live site or a jsFiddle that illustrates the problem.

Edit

To get your implementation working, try this:

#left {
    background: url('../img/shadow_left.png') left center repeat-y;
    left: 0;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: -1;
}
#right {
    background: url('../img/shadow_right.png') right center repeat-y;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: -1;
}
#center {
    position: relative;
    z-index: 1;
}

Notes: - For z-index to be rendered properly, the element must have a declared position property. - You should also change the width of #left, and #right to be the width of your shadow assets. - Make #left, #right, and #center all direct children of #wrapper

Upvotes: 7

Related Questions