responsive background image problem
I have a problem with responsive background images.
I used the <div> but they collapse and the background image cannot be seen. I'll try to explain...
my html code is following:
<div id="company"> <article></article> </div> <div id="mission"> <article> some text here </article> </div> <div id="products"> <article> some text here </article> </div> <div id="contacts"> <article> some text here </article> </div>
my css code is following:
#company { width:100%; padding-bottom: 54.20%; /* calc made according to a project, my image is 1024x555px*/ border-bottom: 3px solid #000000; background-image: url(../img/company.jpg); background-repeat: no-repeat; -webkit-background-size, -moz-background-size, -o-background-size: contain; background-size: contain; background-position: center top; } #mission{ width:100%; padding-bottom: 90.82%; /* calc made according to a project, this image is 1024x930px*/ rest of the code same as above, background image obviously different } #products{ width:100%; padding-bottom: 76.17%; /* calc made according to a project, this image is 1024x780px*/ rest of the code same as above, background image obviously different } #contacts{ width:100%; padding-bottom: 27.54%; /* calc made according to a project, this image is 1024x282px*/ rest of the code same as above, background image obviously different }
now: if I eliminate the "width and padding bottom", the first <div> collapses as there is nothing inside and the background image cannot be seen. the others <div> "crop" my background images and show only enough for the text.
if I leave those values (width and padding) my first <div> (the empty one) fits perfectly with a background image, but the other <div> are "longer" than the size of my image and you can see the background color under the image...
any clues how to fix it?
Web Design | SEO | WordPress | Mobile App @ ZOTO Solutions