CODEWITHSUNDEEP
css
Mark S.
Mark S.

Reputation: 4019

Background image not showing up on mobile page

I'm trying to show different background images based off the screen size. What my CSS has is:

@media only screen and (min-width : 320px) { body{background: url(../images/background/background_320.png) no-repeat ;} }
@media only screen and (min-width : 768px) { body{background: url(../images/background/background_768.png) no-repeat ;} }
@media only screen and (min-width : 1200px) { body{background: url(../images/background/background_1200.png) no-repeat ;} }

The images show up for the large two sizes, but when I have a screen size of 320-768, no image shows up. I've verified that the file is there, but I don't know why the image isn't showing up.

Upvotes: 1

Views: 245

Answers (1)

kevinMario
kevinMario

Reputation: 328

Try this?

body{
   background: url(../images/background/background_320.png) no-repeat ;
}

@media only screen and (min-width : 768px) and (max-width : 1199px) {
   body{ background-image: url(../images/background/background_768.png);} 
}

@media only screen and (min-width : 1200px) {
   body{ background-image: url(../images/background/background_1200.png);} 
}

Since you're only going to be changing the background image and not the no-repeat declaration, we can take it off the Media Queries for a cleaner code.

Upvotes: 2

Related Questions