CSS - How to Setup Different Website Background Images When Viewed via Mobile Phones vs. Tablets vs. Computer

Media Query in CSS to have different devices open up different backgrounds

Most of us bootstrappers do not have the capital to hire someone to create a mobile website. We are forced to find alternative solutions to solve our issues.

What happens when your website shows up fine on your computer, but then it doesn't display properly on your mobile phone or tablet?

Specifically, I had the issue of my background image showing up fine on my laptop/computer, but when displayed on my phone, it became distorted or the images were taking too long to load.

I wanted to figure out if I could show a different background when viewing on a laptop versus tablet or mobile device.

The solution is to use Media Query. Basically what it does is based on the device's width, it will display a different background. Below is a breakdown of the CSS coding you can use. 

In addition, you can change the image versus the color by adding:
background-image:url('INSERT IMG URL');
after body {

On regular browsers you should get the teal background color.
1) orange on an ipad (landscape)
2) black on an ipad (portrait)
3) red on an iphone 4 (portrait)
4) pink on an iphone 4 (landscape)
5) green on regular smartphones, e.g Androids (landscape)
6) purple on a regular smartphone (portrait)

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`