treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

[Solved] box-shadow not working with bg image?

  • JohnMotylJr
    Permalink to comment #
    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
  • kgscott284
    Permalink to comment #
    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;
     }
  • JohnMotylJr
    Permalink to comment #
    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.
Add a Comment