Skip to main content
A
Anonymous
June 21, 2016
Question

How to Make Background Image Responsive?

  • June 21, 2016
  • 1 reply
  • 3588 views

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

A
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;

}

Terms & ConditionsAccessibility statement

Loading footer...