background-image does not go 100% to the right [duplicate] - html

Question

This question already has answers here:
Stretch and scale a CSS image in the background - with CSS only
(22 answers)
Closed 8 years ago.
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;
}

Answer 1

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/

Answer 2

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