Skip to main content
Anonymous
June 21, 2016
Question

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='info.liveintent.com/rs/920-LJZ-738/images/AdvertiserHeroImage.jpg'>

</div>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Anonymous
June 22, 2016

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("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='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;

}

Translate
Terms & ConditionsAccessibility statement

Loading footer...