title: How can we use <picture> tag instead of "background-image"?
body: <p>i want to use different images when opened in different devices. i have set a background image in the paragraph tag.</p>
  <pre><code>&lt;p style=&quot;background-image: url('outdoor.jpg&quot;); color: #fff; font-size: 20px&quot;&gt; blablablabla&lt;/p&gt;
  </code></pre>
  <p>how can i use the below  tag instead of the above &quot;background-image&quot;.</p>
  <pre><code>&lt;picture&gt;
      &lt;source media=&quot;(min-width: 950px)&quot; srcset=&quot;outdoor.jpg&quot;&gt;
      &lt;source media=&quot;(min-width: 765px)&quot; srcset=&quot;wall.jpg&quot;&gt;
      &lt;img src=&quot;plants.jpg&quot; style=&quot;width:auto;&quot;&gt;
  &lt;/picture&gt;
  </code></pre>