How to make a vector background image in css instead of using jpg or png


Tags: html,css,image

Problem :

I have seen and trying to adopt a background using css instead of jpeg or png image. which look like this:

enter image description here

enter image description here

It has been designed in css but I don't know how. I think it is a SVG. Can any one help please...



Solution :

if you want to embed it in your code,

create svg file as below and name it as test.svg.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="126.000000pt" viewBox="0 0 200.000000 126.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,63.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path id="path" d="M340 605 c-71 -16 -175 -20 -242 -10 -30 4 -49 2 -63 -9 -19 -14 -20
-28 -23 -268 -3 -233 -1 -256 15 -276 17 -21 25 -22 173 -21 277 2 409 2 755
2 562 0 597 -1 804 -4 150 -2 203 0 214 10 14 11 16 53 17 281 1 320 11 299
-132 274 -84 -14 -103 -14 -208 0 -272 37 -287 37 -398 16 -86 -17 -113 -18
-176 -9 -60 8 -92 7 -159 -6 -69 -13 -99 -14 -173 -5 -321 40 -332 41 -404 25z"/>
</g>
</svg>

have the css in your file as below :

 #orange{
 width:200px;
  height:63px;
  background-color: #FF931E;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
  //fill: #FF931E;
}
#red{
  width:200px;
  height:63px;
  background-color: red;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
}

and main html file as below:

<div id="red">Download Now</div>
<div id="orange">Download Now</div>

    CSS Howto..

    how to make an image “coming” to foreground

    how to reposition label which sits on top of the checkbox

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    How to refer to children elements in CSS

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to get an image's height and set its parent height to auto?

    How to send an HTML file with css?

    how to align css content string

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to insert a text-like element into document using javascript and CSS?

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    Showing images in placeholder on focus

    How to make a centered, responsive CSS circle within a Boostrap div?

    How to select html5 range's pseudo-elements in JavaScript

    How to position the GWT dialog to the bottom right corner of the browser?

    how to change triangle to up arrow using pure css

    How to check if a css rule exists

    How to make HTML design of a website extensible, reusable and flexible?

    How can I stop an image element from taking 100% width?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How can I vertically align a font-awesome input checkbox with its label?

    How do I hide scroll bar by default

    How to remove blue border around the button in Firefox?

    How to get CSS table-cell to 100% for responsive design [closed]

    How do I get MS Outlook to accept the CSS style display:block?

    CSS column header with img - how to dock img/div to the right?

    how to change a css background onclick

    Ascii character codes shown as text in browser [duplicate]

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    How to Format text boxes with Css