title: Base64 Encoded Image String Not Working In CSS Background-Image Property (C#, ASP.NET, Razor)
body: <p>I am currently working on a C# ASP.NET web app written in the MVC framework. Currently, I have hit a bottleneck in building my view. You can see the code for the view in the following: </p>
  
  <pre><code>@model Vote.Models.DashboardViewModelHolder
  @{    
      Layout = "~/Views/Shared/_DashboardLayout.cshtml";
  }
  
  @*&lt;div class="st_overlay"&gt;&lt;/div&gt;*@ 
  
  &lt;div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"&gt;
  
       &lt;!-- Carousel indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          @for (int i = 0; i &lt; Model.national_Elected_Officials.Count(); i++)
          {
              if (i.Equals(0))
              {
                  &lt;li data-target="#myCarousel" data-slide-to=@i class="active"&gt;&lt;/li&gt;
              }
              else
              {
                  &lt;li data-target="#myCarousel" data-slide-to=@i&gt;&lt;/li&gt;
              }
          }        
      &lt;/ol&gt;
  
      &lt;!-- Carousel items --&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;!-- Utilize a foreach loop here because you dont need to access the iterator for incremental
          calculation. Build the div class = "item", "class ="fill" and the class="carousel-caption"
          inside the foreach loop. --&gt;
          @foreach (var electedOfficial in Model.national_Elected_Officials)
          {
              var base64 = Convert.ToBase64String(electedOfficial.Picture);
              string imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
  
              if (electedOfficial.ElectedOfficialID.Equals(1) &amp;&amp; electedOfficial.Branch.Equals("Executive "))
              {
                  &lt;div class="item active"&gt;
  
                      &lt;!-- Set the first background image using inline CSS below. --&gt;           
                      &lt;img class="fill" src="@imgSrc" /&gt;
                      @*&lt;div class="fill" style="background-image: url(imgSrc);"&gt;&lt;/div&gt;*@   
  
  
                      &lt;div class="carousel-caption"&gt;           
                          &lt;h1&gt;@electedOfficial.Position.ToString() @electedOfficial.FirstName.ToString() @electedOfficial.LastName.ToString()&lt;/h1&gt;
                          &lt;p&gt;&lt;h3&gt;Party:&lt;/h3&gt; 
                          &lt;br /&gt;
                          @electedOfficial.Party.ToString()
                          &lt;/p&gt;
                          &lt;p&gt;&lt;h3&gt;Terms Served In Office In Current Position:&lt;/h3&gt; 
                          &lt;br /&gt;
                          @electedOfficial.Terms
                          &lt;/p&gt;
                          &lt;p&gt;&lt;h3&gt;Years Served In Office In Current Position:&lt;/h3&gt;
                          &lt;br /&gt;
                           @electedOfficial.YearsOfService
                          &lt;/p&gt;
                          &lt;p&gt;&lt;h3&gt;General Description Of @electedOfficial.FirstName @electedOfficial.LastName:&lt;/h3&gt;
                          &lt;br /&gt;
                          @electedOfficial.Bio
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
              else if (!electedOfficial.ElectedOfficialID.Equals(1) &amp;&amp; electedOfficial.Branch.Equals("Executive "))
              {
                  &lt;div class="item"&gt;
                      &lt;img class="fill" src="@imgSrc" /&gt;
                      @*&lt;div class="fill" style="background-image: url(imgSrc);"&gt;&lt;/div&gt;*@
                      @*&lt;div style="background:url(data:image/jpeg;base64,@Convert.ToBase64String(electedOfficial.Picture))"&gt;&lt;/div&gt;*@
  
                      &lt;div class="carousel-caption"&gt;
                          &lt;h2&gt;@electedOfficial.FirstName @electedOfficial.LastName&lt;/h2&gt;
                          &lt;p&gt;@electedOfficial.Party&lt;/p&gt;
                          &lt;p&gt;@electedOfficial.Position&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
  
          }
      &lt;/div&gt;
  
      &lt;!-- Carousel nav --&gt;
  
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The encoded string for the image data does get into the view correctly because the following line works: </p>
  
  <pre><code>&lt;img class="fill" src="@imgSrc" /&gt; 
  </code></pre>
  
  <p>However, I need this picture to act as a background image that fits to scale of the user's monitor (no scrollbars). To do this, I tried the following: </p>
  
  <pre><code>&lt;div class="fill" style="background-image: url(imgSrc);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, the above line of code gets skipped over when I debug line by line in Visual Studio. Due to this, the image does not appear whatsoever. </p>
  
  <p>Has anyone else run into this issue? </p>