Background DIV being cut off - html

Question

sorry to post this cause I know the answer is probably super simple, but I have a div with a background image that is being cut off for some reason and i cant figure out, why?
I tried the make the div size bigger with height and width properties, I tried moving the divs around and I also tried the line-height property and I got nothing.
I have been working on this for while so I'm going to work on something else in the meantime I was hoping someone could look over it and help, possibly point me in the right direction.
THANKS!
Here is the HTML:
<nav>
<ul id="navUl">
<li class="navLinks"><a class="taimurknaziri" href="#top"><strong>TAIMUR K NAZIRI</strong></a></li>
<li class="navLinks">
<a class="navLinks" href="#projects">Projects</a>
<!-- START SUB-MENU FOR PROJECTS -->
<ul class="fallback">
<li class="navLinks">Websites</li>
<li class="navLinks">API's</li>
<li class="navLinks">Games</li>
</ul>
<!-- END SUB-MENU FOR PROJECTS -->
</li>
<li class="navLinks"><a class="navLinks" href="#about">About</a></li>
<li class="navLinks"><a class="navLinks" href="#contact">Contact</a></li>
<li class="navLinks"><a class="navLinks" href="#contact">Blog</a></li>
</ul>
</nav>
<br>
<!-- BACKGROUND -->
<div id="backgroundContainer"><br>
<div id="titleContainer">
<img id="tkn" src ="images/tkn.png">
</div>
</div>
Herre is the CSS:
body,html {
border:0;
margin:0;
padding:0;
height: 100%;
}
/* BEGIN HOME PAGE STYLING */
/* NAVIGATION BAR */
nav {
background:#ffffff;
position: fixed;
float:left;
width: 100%;
opacity: 0.8;
}
nav ul {
text-align:center;
}
nav ul li {
float:left;
display:inline;
}
nav ul li:hover {
color:#000000;
}
nav ul li a {
font-size: 11pt;
font-family: Impact;
text-decoration: none;
display:block;
padding:15px 30px;
color:#6f6f6f;
}
nav ul li ul {
position: absolute;
width:110px;
background:#ffffff;
}
nav ul li ul li {
width:110px;
}
nav ul li ul li a {
display:block;
padding:15px 10px;
color:#6f6f6f;
}
li:hover a {
color:#000000;
}
nav ul li ul.fallback {
display:none;
}
li:hover ul.fallback {
display:block;
color:#000000;
}
#navLinksContainer {
display: inline-block;
margin-top: 40px;
margin-right: ;
margin-bottom: ;
margin-left: 25px;
}
/* BEGIN BACKGROUND STYLING */
#backgroundContainer {
line-height: 40px;
background-image: url("images/nyc_bg.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100%;
max-height: 100%;
margin-top: 50px;
}
/* TITLE THAT IS FIRST LOADED ON THE PAGE */
#titleContainer {
display: inline-block;
}
#tkn {
margin-left: 350px;
margin-top: 100px;
}

Answer 1

Change:
max-height: 100%;
background-size: 100%;
to:
height: 100%
background-size: cover; /* or background-size: 100% 100%; */
for #backgroundContainer.
http://jsfiddle.net/hr9G9/
There are two issues you're facing here. Both background-size and max-height are using percentages in terms of their parent div. Background-size also accepts two values - the first being width, and the second being height. If the second height isn't set, it will default to auto, which isn't what you're looking for. Setting both background-size values to 100% while changing the max-height to height solves all of your problems.