1

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 stumped! I'm fairly new to CSS and HTML and could use some assistance.

Whoever can help me figure this out, I'm willing to paypal a few bucks. If any more information is necessary please let me know! It's the image of the computer right below the nav bar. http://codesilver.us

Dezryth
  • 111
  • 2

1 Answers1

2

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.

lukeocom
  • 121
  • 4