responsive background image problem

by 8 replies
10
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:

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>
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:

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?
#programming #background #image #problem #responsive
  • I thought even not to use a background image, and simply place an image into the <div>, but I need to place it somehow "behind" the text. The only problem is.... I do not know how to... maybe "z-index" can help? how?
  • For responsive image you will do

    img{
    max-width : 100%;
    width: 100%
    }

    Not sure if this will help.
    • [ 1 ] Thanks
    • [1] reply
    • thanx for trying.

      in this moment I am trying to modify my HTML and CSS codes hoping to get lucky, no result yet...

      any suggestions welcome.
  • Use <img /> tag instead or scale it with css.
    • [ 1 ] Thanks
  • thanks. still working on it... no success yet...
  • solved. using an <img> tag.
  • in responsive View you need to add the below code

    background-size :100% 100% ;
  • just use max-width: 100%
Join the discussion

Next Topics on Trending Feed