I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover property. However, as I scale up to a screen size of 2560px, the image ends up getting cropped. I am looking for a workaround to prevent this issue from happening.
Here is my CSS code:
#maincontentcontainer {
width: 100%;
background-image: url(../images/sandpiperBG.jpg);
background-position: center center;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}