Home/ Questions/Q 8460117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:31:06+00:00

Live site. This is my first attempt at utilizing a different CSS for mobile

  • 0

Live site.

This is my first attempt at utilizing a different CSS for mobile devices vs. regular screens.
To do this, I’m using-

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
        background: url('img/background.jpg') no-repeat center center fixed;
        background-size: cover;
        height: 100%;
}

However, it doesn’t seem to be working (I can only test on iPhones). Any ideas as to why that may be? I’ve also tried @media all to no avail.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
         body{
           background: url('img/background.jpg') no-repeat center center fixed;
           background-size: cover;
           height: 100%;
         }
}

    The body is the HTML element that you are targeting so assuming you have a <body> tag in your HTML the CSS styles above will be applied when the device meets the width criteria.

    EDIT : Also try the background like this, if the file is there should work…

    background: transparent url(/img/background.jpg/) no-repeat center center fixed;

    EDIT : Turns out an !important tag fixed this issue, you can read more about CSS precedence here.

    • 0