title: Making an image unclickable/undragable
body: <p>I have an image with text and links over it, and I want to make it so that I can highlight the text as I please without running the risk of dragging the background image instead.</p>
  
  <p>The webpage has a background image already, and this image is a secondary background for the content.</p>
  
  <p>I tried setting it as a background for the bounding box the content is set in, but that does not seem to be possible. If possible I'd like to set the image so that it can neither be clicked on, nor dragged.</p>
  
  <p>I only have experience with html and css.</p>
  
  <p>here is my code
  Html:</p>
  
  <pre><code>&lt;div id="bounding"&gt;
  
  &lt;div id="backgroundimage"&gt;&lt;img src="image.png" width="1010" height="739"&gt;&lt;/div&gt;
  
  &lt;div id="image"&gt;&lt;img src="image.jpg" width="300" height="500"&gt;&lt;/div&gt;
  
  &lt;div id="text2"&gt;
  &lt;h2&gt;&lt;CENTER&gt;Tital&lt;/CENTER&gt;&lt;/h2&gt;
  
  &lt;h5&gt;Text&lt;/h5&gt;
  
  &lt;p&gt;text&lt;/p&gt;
  
  &lt;h5&gt;text&lt;/h5&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bounding {position: relative;hight:739px;width:1010px;border:2px;margin-left:auto;margin-right:auto;margin-top:auto;z-index:7;margin-top:40px;}
  
  #image {position:absolute;left:635px;top:160px;z-index:2;}
  
  #text2 {position:absolute;z-index:4;left:100px;top:206px;width:513px;height:455px;padding right:22px;overflow-y:auto;overflow-x:hidden;scrollbar-base-color: #666666; scrollbar-arrow-color: #9ACD32;color: #494949;}
  
  #backgroundimage {z-index:1;}
  </code></pre>