Background cover is not working correctly

Question

I have a problem : the svg bar isnt responsive (see picture), anyone maybe has a solution for that? I seriously searched for around 1 1/2 hour now and im getting really frustrated :/

Here is my code :

HTML :

<div class="overview-footer">
  <img src="assets/layout/images/dashboard/progress_day.svg" 
       style="display:inline-block;vertical-align:top;" />
  <img src="assets/layout/images/dashboard/progress_week.svg" 
       style="display:inline-block;vertical-align:top;" />
  <img src="assets/layout/images/dashboard/progress_month.svg" 
       style="display:inline-block;vertical-align:top;" />
  <div class="year"></div>
</div>

CSS :

.year {
background-image: url(assets/layout/images/dashboard/progress_year.svg);
width:100%;
height:20px;
display: table;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

}

thats the relevant svg data:

   <rect id="Rectangle-4" fill="#D8D8D8" x="0" y="0" width="100%" height="20"></rect>
   <rect id="Rectangle-4" fill="green" x="0" y="0" width="50%" height="20"></rect>

EDIT: https://plnkr.co/edit/ute15PscCtevJECeRLiE?p=preview there you go

Answer 1

The issue you are facing is actually two-fold:

1. You are declaring explicit width and height on your SVG elements in the markup (eg width="345" height="15" ). This forces preservation of aspect ratio.
2. You did not declare preserveAspectRatio="none" in your SVG elements, which means that they will always scale proportionately.

The problem only arises when your <div> elements have a width of less than 345px , which will cause the browser to scale the images the way you don't intend to.

If you remove these two attributes, your problem will go away: https://plnkr.co/edit/g26kjqYdtf8eNQtwI2Nb?p=preview

Better solution: CSS + HTML-only solution

An alternative solution will be to simply use absolutely-positioned pseudo-elements to do the job. You are going to save a lot of time from maintaining these SVGs that only serve a single purpose, and their markup also appear absolutely bloated.

If you look at the code snippet below, a small modification to your markup and an overhaul of your CSS will mean that you no longer need to depend on SVGs:

 .overview { background-color: #D8D8D8; position: relative; width: 100%; height: 20px; } .overviewDay::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background-color: orange; width: 80%; } .overviewWeek::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background-color: blue; width: 25%; } .overviewMonth::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background-color: red; width: 55%; } .overviewYear::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background-color: green; width: 50%; } 

 <div class="overview-footer"> <div class="overview overviewDay"></div> <div class="overview overviewWeek"></div> <div class="overview overviewMonth"></div> <div class="overview overviewYear"></div> </div>