Different header image base on screen size

  • How do I change the header image used based on the screen size? When a user is viewing my site on a computer or tablet I want to use one header image and when viewing with a smart phone a different header image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • WPChina

    (@wordpresschina)

    This should already be responsive and change automatically inside this theme. Have you tried adding a header image and taken a look to see?

    Thread Starter g-engr

    (@g-engr)

    I have and it does work wonderfully, but that’s not what I’m trying to do.

    For illustration lets say that while viewing the site on a computer or tablet the header has a blue background. But when viewing on a smart phone the header has a red background. I’ve already created the two backgrounds png files. I just need help with coding so it shows the correct background image.

    Thanks for the feedback.

    Thread Starter g-engr

    (@g-engr)

    still looking for an answer … found this

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<picture>
    <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
    <source srcset="img_flowers.jpg">
    <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

    on https://www.w3schools.com/css/css_rwd_images.asp

    How and what code do I edit to make the header change?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different header image base on screen size’ is closed to new replies.