How to Make Background Image Responsive?

Anonymous
Not applicable

How to Make Background Image Responsive?

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>

1 REPLY 1
Anonymous
Not applicable

Re: How to Make Background Image Responsive?

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;

}