Reputation: 784
I have an SVG image:
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:
Here is demo: Fiddle
Upvotes: 2
Views: 101
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
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
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