SVG as CSS background for website navigation-bar
Posted
by
Irfan Mir
on Stack Overflow
See other posts from Stack Overflow
or by Irfan Mir
Published on 2012-06-06T04:37:34Z
Indexed on
2012/06/06
4:40 UTC
Read the original article
Hit count: 513
I drew a small (horizontal / in width) svg to be the background of my website's navigation. My website's navigation takes place a 100% of the browser's viewport and I want the svg image to fill that 100% space.
So, using css I set the background of the navigation (.nav) to nav.svg but then I saw (whenI opened the html file in a browser) that the svg was not the full-width of the nav, but at the small width I drew it at.
How can I get the SVG to stretch and fill the entire width of the navigation (100% of the page) ?
Here is the code for the html file where the navigation is in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav {
margin:0;
padding:0;
min-width:42em;
width:100%;
height:47px;
overflow:hidden;
background:transparent url(nav.svg) no-repeat;
text-align:justify;
font:bold 88%/1.1 verdana;
}
.nav li {
display:inline;
list-style:none;
}
.nav li.last {
margin-right:100%;
}
.nav li a {
display:inline-block;
padding:13px 4px 0;
height:31px;
color:#fff;
vertical-align:middle;
text-decoration:none;
}
.nav li a:hover {
color:#ff6;
background:#36c;
}
@media screen and (max-width:322px){
/* styling causing first break will go here*/
/* but in the meantime, a test */
body{
background:#ff0000;
}
}
</style></head><body>
<ul class="nav">
<!--[test to comment out random items]
<li> <a href="#">netscape 9</a></li>
[the spacing should be distributed]-->
<li> <a href="#">internet explorer 6-8</a></li>
<li> <a href="#">opera 10</a></li>
<li> <a href="#">firefox 3</a></li>
<li> <a href="#">safari 4</a></li>
<li class="last"> <a href="#">chrome 2</a> </li>
</ul>
</body></html>
and Here is the code for the svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="321.026px" height="44.398px" viewBox="39.487 196.864 321.026 44.398"
enable-background="new 39.487 196.864 321.026 44.398" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="280" y1="316.8115" x2="280" y2="275.375" gradientTransform="matrix(1 0 0 1 -80 -77)">
<stop offset="0" style="stop-color:#5A4A6A"/>
<stop offset="0.3532" style="stop-color:#605170"/>
<stop offset="0.8531" style="stop-color:#726382"/>
<stop offset="1" style="stop-color:#796A89"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316
c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027V238.721z"/>
<path opacity="0.1" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028
v39.316c0,1.12,0.812,2.028,1.813,2.028h316.375c1,0,1.812-0.908,1.812-2.028v-39.316C360,198.284,359.189,197.376,358.188,197.376z
M358.75,238.721c0,0.415-0.264,0.779-0.562,0.779H41.813c-0.3,0-0.563-0.363-0.563-0.779v-39.316c0-0.414,0.263-0.777,0.563-0.777
h316.375c0.301,0,0.562,0.363,0.562,0.777V238.721z"/>
<path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028v1.461
c0-1.12,0.812-2.028,1.813-2.028h316.375c1.002,0,1.812,0.908,1.812,2.028v-1.461C360,198.284,359.189,197.376,358.188,197.376z"/>
<g id="seperators">
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="104.5" y1="197.375" x2="104.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="103.5" y1="197.375" x2="103.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="105.5" y1="197.375" x2="105.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="167.5" y1="197.375" x2="167.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="166.5" y1="197.375" x2="166.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="168.5" y1="197.375" x2="168.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="231.5" y1="197.375" x2="231.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="232.5" y1="197.375" x2="232.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="230.5" y1="197.375" x2="230.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="295.5" y1="197.375" x2="295.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="294.5" y1="197.375" x2="294.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="296.5" y1="197.375" x2="296.5" y2="240.75"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029
H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027
V238.721z"/>
</svg>
I appreciate and welcome any and all comments, help, and suggestions.
Thanks in Advance!
© Stack Overflow or respective owner
