Wordpress Shopper Header Difficultly

Question

I’ve been trying all day to get the header image in wordpress shopper theme to respond correctly. The image is resizeing to it’s screen display but it’s adjusting either to small or two large.

Is there a css i can use to add different images for different displays. Like can i call for a different header image on displays less than 424px ?

The text overlay is also to dark and can’t be read well . How can I adjust the title text appearance to one with a shadow of some sort. I’m useing shopper theme on wordpress.

for {} screen {}@media only screen and (max-width:424px){your div css here .img{background-image: url("https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg");}}

for {}screen {}@media only screen and (max-width:800px){your div css here .img{background-image: url("https://beiiu.store/wp-content/uploads/2018/08/688963696-2048x2048.jpg");}}

for {} screen {}@media only screen and (max-width:1080px){your div css here .img {background-image: url("https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg");}}``

Answer 1

Yes, using 'media', you can change your image according to the screen size like:

// for 424px screen
    @media only screen and (max-width:424px){
                   //your div css here
                   .img{
                      background-image: url("first.jpg");
                   }
                }
//for 800px screen
    @media only screen and (max-width:800px){
                   .img{
                      background-image: url("second.jpg");
                   }
                }
    //for 1080px screen
    @media only screen and (max-width:1080px){
                   .img{
                      background-image: url("third.jpg");
                   }
                }