How to Make Background Image Responsive?

[Anonymous]

I'm trying to make my background image responsive, but right now, it remains the same size no matter what size the viewport is. I would like the image to shrink and remain centered as the viewport shrinks. Below is the corresponding code, and I've attached images.

.section-background-image {

1.    position: absolute;
2.    top: 0;
3.    left: 0;
4.    width: 100%;
5.    height: 100%;

}

.parallax {

1.    position: fixed!important;

}

<div class='section-background-image parallax'>

            <img class='mktoImg' id='heroImg' mktoName="Hero Image" src='http://info.liveintent.com/rs/920-LJZ-738/images/AdvertiserHeroImage.jpg'>

</div>

[Anonymous]

Hi Hannah

To make a background image responsive you have to call your image url in parent div container instead of img tag. please see below sample code , hope it will works for you:-

HTML code

<div class="section-background-image">
<h1>text goes here</h1>
</div>

CSS Style inside the head tag

.section-background-image{
   width: 100%;

   height: 120px;
   display: inline-block;
   vertical-align: middle;
   font: 0/0 serif;
   text-shadow: none;
   color: transparent;
   background-size: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;

   background-image: url("http://info.liveintent.com/rs/920-LJZ-738/images/AdvertiserHeroImage.jpg");

}

We have other option as well which includes loading two different images for small and big screen.  else you can try this:-

HTML:-

<div class='section-background-image parallax'>

<img class='mktoImg' id='heroImg' mktoName="Hero Image" src='http://wowslider.com/sliders/demo-10/data/images/dock.jpg'>

</div>

Css:-

.section-background-image {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

}

.parallax {

   position: fixed!important;

}

#heroImg

{

  width:100% !important;

}