responsive background image problem
Hi guys!
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:
as you can see only the first <div> has no text at all, I fill it with an image only.
my css code is following:
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?
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:
HTML Code:
<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:
Code:
#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