CODEWITHSUNDEEP
htmlcss
Degcube
Degcube

Reputation: 82

Background cover is not working correctly

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 :/

enter image description here

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

Upvotes: 0

Views: 939

Answers (1)

Terry
Terry

Reputation: 66123

The issue you are facing is actually two-fold:

  1. You are declaring explicit width and height on your SVG elements in the markup (e.g. 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>

Upvotes: 1

Related Questions