Hero image not being responsive on interior pages

[capples3]

Hi All,

site is www.wintermeresod.com You will notice on the home page the banner is responsive totally. However on the about us page for example the image is not being responsive. Here is the css code for the interior about us page. ```
.about { background: rgba(0, 0, 0, 0) url(“…/images/banner3010.jpg”) no-repeat scroll 0 0; height: 582px; width: 100%;}

Any ideas here on what I'm doing wrong?

[ronpat]

The main sections where the background image is applied are treated differently in CSS.

Why in the world are your outer sections floated?

There are two ID’s main on the aboutus page. There can only be one.

[swetha.s]

​hey capples3,

You can try this method ​

.about { background: rgba(0, 0, 0, 0) url(“…/images/banner3010.jpg”) no-repeat scroll 0 0; height:auto; width: 100%;}

if you still don​’​t get the image responsive​, you can​ add the background size too in same class file as given below,

.about { background: rgba(0, 0, 0, 0) url(“…/images/banner3010.jpg”) no-repeat scroll 0 0; height:auto; width: 100%;background-size:100%}

Suggestion:
height should always be given in percent or auto.
Try also with maxwidth and maxheight.

​Hope this might find you the solution​

Thanks,