CODEWITHSUNDEEP
css
jaycss88
jaycss88

Reputation: 69

Why responsive stops

I'm trying to build out this hero image and it need to be responsive. I haven't added my @media CSS yet, but by default, shouldn't this image I have in here scale with the page? It stops around 1107px width.

.wrapper-home{ 
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}

#hero-image-home{
  background-image:url(http://www.destinationworcester.org/wp-content/uploads/2015/10/halloween-central-mass-blog.jpg);
  position:relative;
  height:640px;
  background-repeat:no-repeat;
}

.header-home {
  position:absolute;
  top:50%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:36px;
  -ms-transform: translate(0,-50%); /* IE 9 */
   	-webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);  

}

.header-home h1 {
	font-size: 36px;
    line-height: 1.2;
    font-weight: bold;
}

.header-home h2 {
    font-size: 18px;
}
<div class="wrapper-home">
  <div id="hero-image-home">
    <div class="header-home">
      <h1>asg sfgasfjkhjhsdg  sdjagk jfjasdgh f</h1>
      <h2>asjkldfh sdjklfh lasdjkfh ajklsdfh lkajsdf</h2>
     
    </div>
  </div>
  
 
</div>

Upvotes: 0

Views: 65

Answers (1)

z1m.in
z1m.in

Reputation: 1661

background-size: 100%;

May help you to scale background image.

.wrapper-home{ 
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}

#hero-image-home{
  background-image:url(http://www.destinationworcester.org/wp-content/uploads/2015/10/halloween-central-mass-blog.jpg);
  position:relative;
  height: 640px;
  background-repeat:no-repeat;
  background-size: 100%;
}

.header-home {
  position:absolute;
  top:50%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:36px;
  -ms-transform: translate(0,-50%); /* IE 9 */
   	-webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);  

}

.header-home h1 {
	font-size: 36px;
    line-height: 1.2;
    font-weight: bold;
}

.header-home h2 {
    font-size: 18px;
}
<div class="wrapper-home">
  <div id="hero-image-home">
    <div class="header-home">
      <h1>asg sfgasfjkhjhsdg  sdjagk jfjasdgh f</h1>
      <h2>asjkldfh sdjklfh lasdjkfh ajklsdfh lkajsdf</h2>
     
    </div>
  </div>
  
 
</div>

Upvotes: 1

Related Questions