Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 8, 2016 at 3:25 pm #658471
    marienlely

    Hi there,

    Searched the forum but couldn’t find an instance where someone uploaded replace images for multiple screen sizes instead of just one.

    I’ve gotten the image to replace in my color section for one screen size. Code I used successfully:

    @media only screen and (max-width: 480px) {
    #home-banner { background-image: url(http://marienlely.com/wp-content/uploads/2016/07/home-banner-480px.jpg) !important; }
    }

    I would also like to use different images for other screen sizes, like 768px, 1024px, etc. to get my image to show up perfectly on everything ;)

    Problem is when I add a new bit of code like:
    @media only screen and (max-width: 768px) {
    #home-banner { background-image: url(DIFFERENT IMAGE URL HERE) !important; }
    }

    it overrides my 480px image. Is it possible to add multiple different images for different screens within in one color section?

    Thanks again for the help!

    July 11, 2016 at 2:00 pm #659267
    Rikard

    Hey marienlely,

    Sorry for the late reply, please try something like this instead: 

    @media only screen and (min-width: 481px) and (max-width: 767px) {
#home-banner { background-image: url(DIFFERENT IMAGE URL HERE) !important; }
}

    Thanks,
    Rikard

    July 11, 2016 at 5:17 pm #659425
    marienlely

    No worries, thanks for the reply. Hmm don’t think that will work as I want two different images for the two sizes in the same color section.

    So I would need one image for the 480px and another for the 767px, and another for 1300px, etc. to have complete control of what shows on what screen size.

    This possible?

    July 12, 2016 at 12:32 pm #659791
    Rikard

    Hi,

    The code I gave you will target screens between 481 and 767 pixels. You posted your own code earlier for targeting screens at 480 pixels and below, what exactly is not working out for you? You can read more about CSS media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Regards,
    Rikard

    July 12, 2016 at 2:08 pm #659849
    marienlely

    The problem with the above code is that it uses the same picture for both sizes

    I would like to use 2 different images for the two different sizes within the same color section.

    In other words one image gets used when user is viewing at 480px width and another image is used when viewing at 768px, not the same image for both sizes.

    Maybe I’m just not understanding correctly. Are you saying I can do this to get different images for the different screen sizes without one overriding the other?

    @media only screen and (min-width: 0px) and (max-width: 480px) {
    #home-banner { background-image: url(DIFFERENT IMAGE URL HERE #1) !important; }
    }

    @media only screen and (min-width: 481px) and (max-width: 767px) {
    #home-banner { background-image: url(DIFFERENT IMAGE URL HERE #2) !important; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1300px) {
    #home-banner { background-image: url(DIFFERENT IMAGE URL HERE #3) !important; }
    }

    • This reply was modified 8 years, 4 months ago by marienlely.
    July 13, 2016 at 11:47 am #660304
    Rikard

    Hi,

    As far as I can see your code should work, if it doesn’t then you could try removing the !important statement.

    Regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.