Background for PC but not for mobile

  • Resolved nomadicninja

    (@nomadicninja)


    11 years, 8 months ago

    How do I set a background image for my site that works on full size screens but not on mobiles?

    I’ve added a background image in CSS, but it is too large on mobile screens, so I want to lose it alltogether on small screens.

Viewing 4 replies - 1 through 4 (of 4 total)
  • rdellconsulting

    (@rdellconsulting)

    11 years, 8 months ago

    You need to add @media to switch off when the viewport reaches a certain size.

    Depending on which selector you used for the background, the code will look something like:

    @media all and (max-width:600px) {
.selector {display: none;}
}
    Thread Starter nomadicninja

    (@nomadicninja)

    11 years, 8 months ago

    I’m new to using CSS, the background is created like this:

    body {
    background: url(my image url) ;
    }

    I’m not sure if I add the @media into the body section or as a seperate section?

    Rocco Aliberti

    (@d4z_c0nf)

    11 years, 8 months ago

    So somehting like:

    @media all and (max-width:767px) {
body {background: none;}
}

    should work.

    p.s.
    separate section

    Thread Starter nomadicninja

    (@nomadicninja)

    11 years, 8 months ago

    Spot on, works a treat.

    Many thanks for that.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Background for PC but not for mobile’ is closed to new replies.