Girts Girts - 3 months ago 8
CSS Question

How to make div elements inside a div background image responsive using css

My question is this how do I make it work that the elements that are inside a div style=background-image work correctly when the screen gets smaller. In my case it seems that one of the elements inside the image box keeps the same height.



#main_article_box {
width: 728px;
height: 374px;
border: 1px solid #f8f8f8;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#main_article_text {
margin: 280px 3px 10px 3px;
height: 90px;
background: #ffffff;
border: 1px solid #f8f8f8;
background: #ffffff;
background: -moz-linear-gradient(#ffffff, #cccccc);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(1, #ffffff));
background: -webkit-linear-gradient(#ffffff, #cccccc);
background: -o-linear-gradient(#ffffff, #cccccc);
background: -ms-linear-gradient(#ffffff, #cccccc);
background: linear-gradient(#ffffff, #cccccc);
/*-moz-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: 0 1px 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px #f8f8f8;
box-shadow: 0 1px 1px #f8f8f8;*/
opacity: 0.8;
filter: alpha(opacity=80);
}
#main_article_title {
font-size: 23px;
letter-spacing: -1px;
text-transform: uppercase;
text-shadow: #333;
font-weight: bold;
margin: 8px;
}
#main_article_short_text {
font-size: 14px;
width: 530px;
font-weight: bold;
margin: -2px 0 0 8px;
color: #333333;
}
@media only screen and (max-width: 460px) {
#main_article_box {
width: 100%;
height: auto;
}
#main_article_text {
width: 98%;
height: auto;
}
#main_article_title {
font-size: 16px;
}
#main_article_short_text {
font-size: 11px;
}
}

<div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg); no-repeat center; background-size: 100% auto; ">
<div id="main_article_text">
<div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a>
</div>
<div id="main_article_short_text">
<p>This is some intro text the article below title. This is some intro text the article below title.</p>...
</div>
</div>
</div>




Answer

I removed some styles only for me to understand the code. Is this solution correct for you?

.wrapper {
  position:relative;
  width:728px;
  max-width:100%;
}
.wrapper:after {
  content: ' ';
  clear: both;
  display: block;
}

#main_article_box {
  float:left;
  width:100%;
  height:auto;
  border:0 none;
  padding-top:51.37%;
  background-size:cover;
}


#main_article_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 3px 3px 3px;
  height: 90px;
  background: #ffffff;
  border: 1px solid #f8f8f8;
  background: #ffffff;
  background: -moz-linear-gradient(#ffffff, #cccccc); 
  background: -webkit-gradient(linear,left bottom,left     top,color-stop(0, #cccccc),color-stop(1, #ffffff));	
  background: -webkit-linear-gradient(#ffffff, #cccccc);	
  background: -o-linear-gradient(#ffffff, #cccccc);
  background: -ms-linear-gradient(#ffffff, #cccccc);
  background: linear-gradient(#ffffff, #cccccc);
  /*-moz-border-radius: 1px;
  border-radius: 1px;
  -moz-box-shadow: 0 1px 1px #f8f8f8;
  -webkit-box-shadow: 0 1px 1px #f8f8f8;
  box-shadow: 0 1px 1px #f8f8f8;*/
  opacity:0.8;
  filter:alpha(opacity=80);
}

#main_article_title {
  font-size: 23px;
  letter-spacing: -1px;
  text-transform:uppercase;
  text-shadow: #333;
  font-weight: bold;
  margin: 8px;
}

#main_article_short_text {
  font-size: 14px;
  width: auto;
  font-weight:bold;
  margin: -2px 0 0 8px;
  color: #333333;
}

@media only screen and (max-width: 460px) {


  #main_article_box {

    width: 100%;
    height: auto;

  }


  #main_article_text {
    width: 98%;
    height: auto;


  }

  #main_article_title {
    font-size: 16px;


  }

  #main_article_short_text {
    font-size: 11px;

  }  

}
<div class="wrapper">
  <div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg);">
    <div id="main_article_text">
      <div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a></div>
      <div id="main_article_short_text"><p>This is some intro text the article below title. This is some intro text the article below title. </p>...</div>
    </div>
  </div>
</div>

Comments