Search code examples
cssbackgroundfixed

Background on fixed navigation bar not appearing


I currently have a DIV containing my fixed navigation bar in hopes to have a background image spanning across the screen behind the nav bar while the screen scrolls. However, the background isn't showing up. I tried this tip, but it didn't seem to work.

Here's my site: http://www.whiterabbitstudio.us/ and this is the background thati's supposed to line up behind the navigation ribbon: http://www.whiterabbitstudio.us/1images/head_bkg.png

Does anyone have any ideas? Thanks!!


Solution

  • It's hard to tell what you're actually trying to do, but at the moment you specified the head_bkg.png to be the background image of the <div class="header">...</div> element which has a height of 0px, thus not showing any background.

    To show the background properly, I'd say you should add it to the navigation div and rework the layout of that part quite some bit, e.g. no negative margin-left, make the width 100%, center the content and add a background-size: 100%;

    Besides, if you want to have the background continuous, you need to crop the image to avoid the transparent parts above and below.