Reduce but not increase background size

Question

background: #344b68 url(../../data/img/template/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover; 
-moz-background-size: cover;    
-o-background-size: cover;      
background-size: cover;         

Hello once again Stackoverflow, I have the following question.

Background.jpg is my websites background picture, wich is in 1080p resolution (1920x1080). On the border of the image, it fades to #344b68 .

Viewing this on a 720p monitor will cause the picture to reduce in size using background-size: cover but this will also be increased when viewing this on for example 1440p resolutions.

Now what I want to do is when it's a 720p monitor reduce the image' dimensions with background-size: cover to fit, but when its above 1080p , it stays the same dimentions and just fades in with the static background color ( #344b68 ).

How can I do this, preferibly without JS?

Thanks in advance!

Answer 1

This looks like a job for Media Queries ! These are a CSS3 feature that let you specify code to only activate when certain conditions are met. In your case, you want to query the window width:

/* normal styles */
.item-with-background {
    background-size: contain;
}

/* overrides when screen is 720px wide or smaller */
@media screen and (max-width: 720px) {
    .item-with-background {
        background-size: cover;
    }
}

Note: Media queries are supported in basically all the browsers (including mobile) except IE 6/7/8. If you REALLY need to have media queries in use in those browsers, there are some polyfills that hack-in that ability.