Displaying image from within CSS file - html

Question

I am working on an application and am attempting to show the header image using #URL.Content from within the CSS sheet, like so
.jumbotron .header-image {
min-width:1024px;
min-height:267px;
background-image: url('#Url.Content("~/Content/images/header.png")');
the image is there but all I get is a square box where the header should be. I am displaying it simply enough
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
Where am I going wrong?
EDIT
#Jesse this is all of it:
.jumbotron {
text-align: center;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.jumbotron .header-image {
min-width:1024px;
min-height:267px;
background-image: url('#Url.Content("~/Content/images/header.png")');
}
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
I cannot figure out why this isnt working, it looks correct

Answer 1

I believe you are getting a conflict with your two background style declarations, one in jumbotron and the other with .header-image. Is there a reason you want to use:
<div class="jumbotron">
<div class="jumbotron header-image"></div>
</div>
instead of just:
<div class="jumbotron">
<div class="header-image"></div>
</div>

Answer 2

I have some following suggestions. See if it can help you. Have step by step approach.
Firstly, Instead of the code <div class="jumbotron header-image"> you can simply use it as <div class="header-image">. Because, with the Combination you can still get the desired effect. [I know, you are using class jumbotron to have transparency]
Second, make sure as what is the path that your code assumes/renders. As you are using #Url.Content("~/, it gives you, your application root. That means if you try to construct the URL as http://YOUR_APPROOT/Content/images/header.png [Please change your APPROOT appropriately, before checking] and put in the address bar of the browser, you should see the Image. If you are not, then there should be some issue about the Path. Just a guess.. Is the folder Content, in capital letter or small? Just check.
Third, somewhat similar posts from SO may be of some use to you. Just Check:
Is there a benefit to using #Url.Content("~")
slash(/) vs tilde slash (~/) in style sheet path in asp.net [Refer the Accepted Answer of this post]
Hope this will help you solve your issue. Good Luck