Different header images for different devices
Hi!
I’m working on “Catch Fullscreen Free” header and I would like to know if there is any possibility to have unique images for different device size. I need to show one different image for the header in mobile, tablet or desktop device/size.
I’ve tried with additional CSS but doesn’t works properly (shown below):
@media screen and (max-width: 400px) {
.home .custom-header .wp-custom-header img {
background-image: url("http://localhost:8888/Dra.%20Cristina%20Sanchez/wp-content/uploads/2020/11/fullpage-header_mobile.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1025px) {
.home .custom-header .wp-custom-header img {
background-image: url("http://localhost:8888/Dra.%20Cristina%20Sanchez/wp-content/uploads/2020/11/fullpage-header_desktop.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}
Could you please suggest what to do?
Thank you!