0

So my problem is i need my navbar background-image to go the entire distance of the page width wise. here is a fiddle: http://jsfiddle.net/faytAlvein/FDVby/4/ the black under the nav is fine ignore that. that's not there in the original because it's a different background image. just the width is the problem. it needs to scale 100% of the page no matter the window size. real background image is 1145x144 if that helps.

    <div id="navbar" >
        <div id="links" >
            <a href="thisindexpage.php" class="navLink" >Home</a>
            <a href="aboutUs.html" class="navLink" >About Us</a>
        </div>
    </div>​

navbar.css

#navbar
{
background-image: url('../images/nav.png');
background-repeat: no-repeat;
background-color: black;
}

#links
{
font-size: 20px;
font-family: helvetica;
padding-top: 25px;
padding-bottom: 94px;
margin-left: 150px;
}
Jon
  • 75
  • 1
  • 1
  • 9

2 Answers2

0

You could "stretch" your background image to 100%, using the background-size property.

background-size: 100%;

Your CSS:

#navbar {
   background-image: url('../images/nav.png');
   background-repeat: no-repeat;
   background-color: black;
   background-size: 100%;
}

http://jsfiddle.net/FDVby/7/

Sparky
  • 98,165
  • 25
  • 199
  • 285
0

Use the background-size property Here's the documentation: https://developer.mozilla.org/en-US/docs/CSS/background-size

Henry Boldizsar
  • 489
  • 1
  • 8
  • 25