Sharing background-image with different views in a layout

Question

I have a simple custom layout with a background image (PaintLayout.cshtml):

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="/Content/PaintStyles.css" rel="stylesheet" type="text/css" /> 
</head> 
<body style="background: url('Images/PaintBackgroundSM.png')">
    <div id="header">
        <h1>@ViewBag.Headline</h1>
    </div>

    <div>
        @RenderBody()
    </div> 
</body>

The Index.cshtml shows the image just fine

@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}

<div style="text-align:center">
    <h1>@ViewBag.Message</h1>
</div>

but the View does not. It does, however, get the rest of the css from PaintStyles.css, just not the image from the layout

@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}

<div>
    <h2>ShowDetail</h2>
</div>

I have tried several variations on the path to the image. The one I'm using is the only one that works even on the Index.cshtml. My Images folder is in the root, where the template put it. My Index and view are both in the same path under Views\Paint.

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

You need to either use a path that can be resolved anywhere in your application:

/foo/bar/image.jpg
//example.com/foo/bar/image.jpg
http://example.com/foo/bar/image.jpg
Note that the ~/ prefix will not work inside an inline style without additional code.

Or (simpler and much cleaner) put the path into your stylesheet where it will be resolved relative to the stylesheet.

body{
    /* use a path relative to the stylesheet's location */
    background: url('../Images/PaintBackgroundSM.png')
}

edited May 23 '17 at 12:10

Community

1
1

answered Mar 07 '14 at 21:53

Tim M.

53,671
14
120
163

Thanks for the suggestion, but it didn't work. I can't get the image to show up even in the Index.cshtml if in the PaintStyles.css. I've used background, background-image, two dots, a tilde. Can't think of anything I haven't tried. – stk1541 Mar 10 '14 at 20:30
ha! wait! got it. It liked the extra slash, but not the two dots. So, final fix is: background: url('/Images/PaintBackgroundSM.png') Thank you tremendously! I thought I had exhausted all the variations. I wouldn't have tried that without your prompt. – stk1541 Mar 10 '14 at 20:33

Sharing background-image with different views in a layout

1 Answers1