CODEWITHSUNDEEP
htmlcsssvg
Altaula
Altaula

Reputation: 784

CSS - SVG issue

I have an SVG image:

enter image description here

This is what I am doing to display the iamge: 

background-color: rgb(110, 100, 90);
background-image: url(a.svg);

This is the result:

a {
  text-decoration: none;
}
.flex {
  display: flex;
}
#a {
  background-color: rgb(56, 46, 36);
  height: 80px;
}
#b {
  justify-content: center;
}
#b a {
  color: rgb(100, 90, 80);
  font-family: "HelveticaNeue-CondensedBold";
  font-size: 18px;
  line-height: 60px;
  padding: 0 15px;
  text-transform: uppercase;
  transition-duration: .25s;
}
#b a:hover,
#b a.active {
  background-color: rgb(110, 100, 90);
  background-image: url(https://imgh.us/a_8.svg);
  color: #fff;
}
<div id="a"></div>
<div id="b" class="flex">
  <a href="#">O nás</a>
  <a href="#" class="active">Fotogaléria</a>
  <a href="#">Denné menu</a>
  <a href="#">Jedálny lístok</a>
  <a href="#">Ubytovanie</a>
  <a href="#">Kontakt</a>
</div>

Can you tell me how to stretch the SVG to 100%?

The result I expected:

Required result

Here is demo: Fiddle

Upvotes: 2

Views: 101

Answers (3)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

actually i have done is that i just only given the background as image only to the 100%

now what happens is that i used background property so it will override the background-color automatically while background is repeating due to 100%

even you can give it by repeat to the background here is what i have done and it looks good isn't it.?

#b a:hover, #b a.active {
  background-color: rgb(110, 100, 90);
  background: url(http://imgh.us/a_8.svg) 100%;
  color: #fff;
}

Upvotes: 0

Jayx
Jayx

Reputation: 3976

Modify your CSS as follows:

#b a:hover, #b a.active {
    background-color: rgb(110, 100, 90);
    background-image: url("http://imgh.us/a_8.svg");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

You need the background-size 100% 100% to fill the background in all directions (especially on narrower elements), but it does affect your transition a little.

Upvotes: 0

Persijn
Persijn

Reputation: 15000

If you set the background-size to cover it will fill it to its width. (since your image is taller then wide).

Adding background-position: bottom; makes it so that this particular image will always be displayed.

a {
  text-decoration: none;
}
.flex {
  display: flex;
}
#a {
  background-color: rgb(56, 46, 36);
  height: 480px;
}
#b {
  justify-content: center;
}
#b a {
  white-space: nowrap;
  color: rgb(100, 90, 80);
  font-family: "HelveticaNeue-CondensedBold";
  font-size: 18px;
  line-height: 60px;
  padding: 0 15px;
  text-transform: uppercase;
  transition-duration: .25s;
}
#b a:hover,
#b a.active {
  background-color: rgb(110, 100, 90);
  background-image: url(http://imgh.us/a_8.svg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  color: #fff;
}
<div id="b" class="flex">
  <a href="#">O nás</a>
  <a href="#">Fotogaléria</a>
  <a href="#">Denné menu</a>
  <a href="#">Jedálny lístok</a>
  <a href="#">Ubytovanie</a>
  <a href="#">Kontakt</a>
</div>

Upvotes: 2

Related Questions