CODEWITHSUNDEEP
htmlcssresponsive-design
Nicolas Charvoz
Nicolas Charvoz

Reputation: 1509

Responsive image inserted with css

I'm having an issue with one of my joomla website. I'm using sobi to display a map of outlets available in the shopping mall. And I want to make this map responsive. The problem is that this map is an image inserted with css :

HTML : 

<div id="system">
    <article class="item">
      <div class="content clearfix">
        <div id="plan-boutiques">
          <img src="..."></img> <!-- This is the points on the map not the map -->
        </div>
      </div>
    </article>
</div>

CSS: 

#plan-boutiques {
  background: url(../images/rom/niveau.png) no-repeat;
  position: relative;
  display: block;
  height: 374px;
  width: 685px;
  margin: 0 auto;
  z-index: 1;
}

Then when I change the width, the image is cropped and not resized as it would be if I had the image in an img tag. I can't change this, the image as to be added with css. I hope there's a way to make it responsive !

Thanks

Upvotes: 1

Views: 122

Answers (2)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

To make responsive don't apply any fixed with and height. No need to apply width and height. Use this width and height in this way.

#plan-boutiques > img {
  width: 100%;
  height: auto;
  max-width: 685px;
  max-height: 374px;
 }

Upvotes: 1

chazsolo
chazsolo

Reputation: 8439

Change your #plan-boutiques rule:

#plan-boutiques {
    background: url(../images/rom/niveau.png) no-repeat top center / contain;
    /* ... */
}

Upvotes: 0

Related Questions