Changing an Image using CSS

User 2683824 Photo


Registered User
3 posts

I have a <div> which contains an <img> tag is it possible to change the image which is displayed by the <img> tag at certain resolutions using a media query in CSS?

I have tried to adding a id tag to both the div and the img but can't get the image to change using the following CSS

@media only screen and (min-width: 480px) and (max-width: 767px) {
#logo {src="../images/headerlogo.png"; }

or

@media only screen and (min-width: 480px) and (max-width: 767px) {
#logo {url(.../images/headerlogo.png); }

Any suggestions would be appreciated
User 2088758 Photo


Senior Advisor
3,086 posts

Hi there Steve,

What you would want to do is create an "id" to your div then when you get the the media size you want the pictures to change you would assign display:none; to the css to the one you want to disappear and display:block; to the one you want to appear. Remember that you have to go through each of your media queries and adjust the display for each.

hope this makes sense.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2683824 Photo


Registered User
3 posts

Steve

Thanks for the reply I tried this code, the original image is now hidden but I can't get the replacement image to display

@media only screen and (min-width: 480px) and (max-width: 767px) {
#logo1 {display: none; }
#logo1 img {src="../images/amsoillogo.png";}<--This is the new image -->
#logo1 {Display: block;}
}
User 2088758 Photo


Senior Advisor
3,086 posts

You need to do this

@media only screen and (min-width: 480px) and (max-width: 767px) {
#logo1 img {src="../images/amsoillogo.png";}<--This is the old image -->
#logo1 {display: none; }

#logo img {src="../images/amsoillogoo2.png";}<--This is new image -->
#logo {Display: block;}
}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,181 posts

src?;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,086 posts

Thats what i get for trying to answer a coding question from my phone lol. Please show me the errors of my ways Eric.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 271657 Photo


Ambassador
3,816 posts

You need to set your display properties for all breakpoints/media queries.
Something like this:
CSS

@media only screen and (min-width: 768px) { <<<large
#logo-1 { display: block; }
#logo-2 { display: none; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) { <<<medium
#logo-1 { display: none; }
#logo-2 { display: block; }
}

@media only screen and (max-width: 479px) { <<<small
#logo-1 { display: none; }
#logo-2 { display: block; }
}

HTML
<div class="logos">
<div id="logo-1"><img src="../images/amsoillogo.png" ></div>
<div id="logo-2"><img src="../images/amsoillogoo2.png" ></div>
</div>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2088758 Photo


Senior Advisor
3,086 posts

Thats it! Thanks paintbrush yea we have to pull those images out of the css... my bad.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 271657 Photo


Ambassador
3,816 posts

Sorry, I had to "post and run". I was hoping that helped make things clearer!
I've spent the last 4 years or so figuring out how to do this stuff without the RLM... :P
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2683824 Photo


Registered User
3 posts

Thanks to everyone that responded! the suggestion from paintbrush did the trick.


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.