Grow your CSS skills. Land your dream job.

box-shadow not working with bg image?

  • # December 21, 2011 at 11:08 pm

    I have scoured this site but i cannot find the post Chris made about box-shadow on a entire site, well to fit the entire page. So i have some css it works without the images but not with.

    This is code which works (totally ugly, properties are set just for testing purposes).

    html {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 200px yellow;
    -webkit-box-shadow:inset 0 0 200px yellow;
    box-shadow:inset 0 0 200px yellow;
    }

    But when i add…

    background:url(bg99.jpg);

    the box-shadow goes away. My image is a 100px x 100px that repeats.

    I just want some glow :( Is there anyway to achieve this?

    I have been looking into some pseudo elements for html or body and possibly think i could add the glow html:after so it is on top? But i dont fully conceptually grasp pseudo elements.

    Anyone else has issues with this or could possibly direct me to that post Chris made, i just cant se

    # December 22, 2011 at 3:05 am

    Nope, no reason to do all that, you did it right the first time…what browser you using???

    This worked fine for me in Chrome and FireFox…of course no IE support…

    html {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background: url('bg99.jpg') repeat top left;
    -moz-box-shadow: inset 0 0 200px #FF0;
    -webkit-box-shadow: inset 0 0 200px #FF0;
    box-shadow: inset 0 0 200px #FF0;
    }
    # December 22, 2011 at 3:31 am

    I’m using Chrome and FireFox as well. When the page loads I can see the glowing border for a split second than the background image loads and glow is gone. I’m going to recheck my code, try in a blank test page and ill get right back to you / edit post.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".