: Can't get an image to scale to browser size! If anyone has any insight on why this background image is not scaling properly on this page to browser size, that would be really helpful. I am

@BetL925

The problem here is that you're not setting a relative width for the background. You are positioning it, but not setting the width.
You can set the size by using the background-size property like this:

.newheader{
background-size:100% 100%;
}


or to combine with the other background properties:

.newheader{
background:url("../img/slide1.jpg") no-repeat scroll center center / 100% 100% auto #3E4549 !important;
}


Your other option is to use fixed widths for the background depending on device/screen size. For example if the screen size is 480px or less, you could set the width of the background to say 400 pixels wide:
@media only screen and (max-width : 480px) {
.newheader{
background-size:400px 100%;
}
}


that should get you started, you may need to tweak it to what you need, including updating the image itself...

Hope this helps.

Vote Up Vote Down