Header image with .NET Core and bootstrap - asp.net-mvc

Question

I'm starting to learn code in .net core 2.0 and as the first application I decided to write a simple blog system. I encountered a problem when i wanted put different header background image to the each post details page and the main one on index page. Image is passing by ViewData["Image"] to the _Layout. I tried to put the same image to the both views Index and Details but image displays only on Index page.
Index View
#model PaginatedList<MHBlog.Models.Post>
#{
ViewData["Title"] = "Index";
ViewData["Image"] = "11.jpg";
}
<h2>Index</h2>
Details View
#model MHBlog.Models.Post
#{
ViewData["Title"] = "Index";
ViewData["Image"] = Model.ImageName;
}
<h2>Details</h2>
_Layout
<header class="masthead" style="background-image: url(images/#ViewData["Image"])">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1>Blog</h1>
<span class="subheading">My First Blog</span>
</div>
</div>
</div>
</div>
</header>
CSS
header.masthead {
margin-bottom: 50px;
background: no-repeat center center;
background-color: #777777;
background-attachment: scroll;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0 150px;
color: white; }
#media only screen and (min-width: 768px) {
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0; } }
header.masthead .page-heading,
header.masthead .site-heading,
header.masthead .post-heading{
text-align: center;
}
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
font-size: 50px;
margin-top: 0; }
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
font-size: 24px;
font-weight: 300;
line-height: 1.1;
display: block;
margin: 10px 0 0;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#media only screen and (min-width: 768px) {
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
font-size: 80px; } }
header.masthead .post-heading h1 {
font-size: 35px; }
header.masthead .post-heading .meta,
header.masthead .post-heading .subheading {
line-height: 1.1;
display: block; }
header.masthead .post-heading .subheading {
font-size: 24px;
font-weight: 600;
margin: 10px 0 30px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
header.masthead .post-heading .meta {
font-size: 20px;
font-weight: 300;
font-style: italic;
font-family: 'Lora', 'Times New Roman', serif; }
header.masthead .post-heading .meta a {
color: white; }
#media only screen and (min-width: 768px) {
header.masthead .post-heading h1 {
font-size: 55px; }
header.masthead .post-heading .subheading {
font-size: 30px; } }
Index page:
Details page:
I tried to set details ViewData Image to
#ViewData["Image"] = "11.jpg"
But nothing changed on details page.

Answer 1

Try like that style="background-image:url('/images/#ViewData["Image"]')".
<header class="masthead" style="background-image:url('/images/#ViewData["Image"]')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1>Blog</h1>
<span class="subheading">My First Blog</span>
</div>
</div>
</div>
</div>