title: How to set 100% width for a parallax image?
body: <p>I have a parallax class which contains the image as well. I tried to make the image responsive by setting the image width to 100%, but its just not working.</p>
  
  <pre><code>.parallax1 {
    /* The image used */
    background-image: url('Images/FloralPurple.png');
    /* Full height and width */
    height: 100%; 
    width:100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }  
  </code></pre>
  
  <p>and the following is the HTML code:-</p>
  
  <pre><code>&lt;div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px"&gt;
  Some text which defines the image&lt;/div&gt;
  </code></pre>
  
  <p>I tried adding the image tag inside of my div, but still, nothing got changed.</p>
  
  <p>Thank you</p>