How to set 100% width for a parallax image?

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.

.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;
}

and the following is the HTML code:-

<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>

I tried adding the image tag inside of my div, but still, nothing got changed.

Thank you

Solution

The size of your background image is defined by the background-size css property. When set to cover the image will scale in order to fill the div. You can set the background size to the following values:

cover As described the div gets covered. The image gets scaled and cropped.
contain The image is always full completely visible and gets scaled in order to be completely visible.
100px 50px A fixed size. The image gets streched.
50% 100% A percentage. The image gets stretched.

Example:

background-size: 100%;

The image would always fill the div. But get stretched in order to do so.