adapting background images to screen resolutions in CSS
@media (max-width: 320px) {
body {
background-image: url('images/background_320.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 321px) and (max-width: 1023px) {
body {
background-image: url('images/background_1024.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
body {
background-image: url('images/background_1024.jpg');
background-repeat:no-repeat;
}
}
@media (min-width: 1280px) and (max-width: 1365px) {
body {
background-image: url('images/background_1280.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}
@media (min-width: 1366px) {
body {
background-image: url('images/background_1920.jpg'); opacity: 0.5;
background-repeat:no-repeat;
}
}