Background Image not sizing to width of section

Question

Thanks for any help. I'm fairly new to web developing and I've run into a strange issue on my site. http://bit.ly/1nnzqeB

The image that seems to be BEHIND it should be scaling to fit in the section, rather than what it's doing now. I've been stumped on this for hours and I feel that it's probably something stupid simple so I'm reaching out to the experts. Please help!

Answer 1

Well, im guessing you want this image to scale and fit the entire horizontal white space. http://codesilver.us/wp-content/themes/SVG/img/slide1-1.jpg

After looking at your code, your .container needs to be 100% width

.container {
  width: 100%;
}

After i applied this fix it appears to work, you may want to clean up your div structure a bit overall, but that's a different conversation.

UPDATE: For re sizing you can use the css cover property for background-size: cover; this make sure the image covers the entire div and vertically and horizontally aligns the picture as well.

newheader {
  /* background-size: 100px 100px; */
  background: url("../img/slide1-1.jpg") no-repeat scroll center center;
  margin-top: 5%;

  /*background-size*/
  -moz-background-size:cover;
  background-size:cover;


}

Answer 2

Assuming this is actually how you want it to look, do two things:

• Remove the background-size: 100px 100px; from the .newheader class
• Add width: 100%; to the same class