HTML and CSS Reference
In-Depth Information
6.
To test your image, using Windows Explorer, browse to this file and open it. This
should launch a browser and display the snowman image.
7.
In the Solution Explorer, right-click the Images folder and select the Add ➤ Existing
Item links. Select the snowman.svg file and click the Add button.
Using an SVG Background
Now you have an image file that you can use just like other images. To demonstrate this, you'll add a div element
to your page and use the snowman.svg as the background image. You'll also adjust the div size so you can see how
the image looks when resized.
eXerCISe 9-3. aDDING a BaCKGrOUND IMaGe
1.
In the Index.cshtml file, add the following code in the body element, after the svg
element:
<div id="container"></div>
2.
This simply defines a div element. Now you'll use CSS to configure it. Add the
following style element inside the head element:
<style type="text/css">
#container {
height: 1000px;
width: 450px;
background-image: url("Images/snowman.svg");
background-size: contain;
}
</style>
3.
In order for IIS to recognize the .svg file, you'll need to define the mime map. open
the web.config file in the root folder (not the one in the Views folder). Add the
following entry shown in bold inside the system.webServer node:
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
</staticContent>
</system.webServer>
4.
Press F5 to debug your application. In addition to the small image, you should also
see a larger version of your image as shown in Figure 9-4 . Notice that there is no
loss of image quality when expanding the size of the image.
 
Search WWH ::




Custom Search