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.