Trying to get bg image to disappear when screen is smaller?

Question

I'm trying to get my background images to disappear as the screen size/resolution gets smaller as it makes everything too busy.

I have very basic html skills and basically no CSS knowledge.

To possibly complicate matters it is on a Big Cartel that has been modified slightly. At the moment I have this code for my background:

body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}

I looked into media enquiries(?) but could not get it to work.

I'd like any help possible. I assume you might need to look at more code which i'd be happy to provide you with. Also I could throw you a free tee for the trouble!

Can you provide a jsfiddle. http://www.jsfiddle.net – Chamara Keragala May 12 '14 at 11:31 — Chamara Keragala, May 12 '14 at 11:31

score 2 · Accepted Answer · answered May 12 '14 at 11:41

Maybe you didn't include the media query the right way, here is an example of your CSS along with a media query which makes the background go when the browser window is 600px width or less.

body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}
/**
 * Remove background if window width is 6OOpx or less 
 */
@media all and ( max-width: 600px ) {
  body {
    background: none;
  }
}

Working example: http://codepen.io/anon/pen/sfLmo (resize your browser to test)

Cheers.

Cheers dude! Works a treat. If you want a tee let me know and ill send one to you as thanks! — user3628175, May 13 '14 at 18:26

score 1 · Answer 2 · answered May 12 '14 at 11:37

try this

@media only screen  and (max-device-width :700px) {
  body{
    background:none;
  }
}
@media only screen  and (min-device-width: 701px) {
   body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}
}

Trying to get bg image to disappear when screen is smaller?

2 Answers2