How can we use <picture> tag instead of "background-image"?

Question

i want to use different images when opened in different devices. i have set a background image in the paragraph tag.

<p style="background-image: url('outdoor.jpg"); color: #fff; font-size: 20px"> blablablabla</p>

how can i use the below tag instead of the above "background-image".

<picture>
    <source media="(min-width: 950px)" srcset="outdoor.jpg">
    <source media="(min-width: 765px)" srcset="wall.jpg">
    <img src="plants.jpg" style="width:auto;">
</picture>

Answer 1

You can't achieve this with inline style. Use a stylesheet with media queries instead.

<p id="myParagraph">blablablabla</p>

and

#myParagraph {
    background-image: url('plants.jpg");
    color: #fff;
    font-size: 20px;
}

@media (min-width: 765px) {
    #myParagraph {
        background-image: url('wall.jpg");
    }
}

@media (min-width: 950px) {
    #myParagraph {
        background-image: url('outdoor.jpg");
    }
}