Displaying image from within CSS file

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

Jesse Kernaghan · Answer 1 · 2015-05-25T17:50:23.113

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>

edited May 25 '15 at 17:50

answered May 25 '15 at 16:40

Jesse Kernaghan

4,544
2
18
25

well header-image is a child of jumbotron (fixedi in original post) – PsychoCoder May 25 '15 at 16:43
@PsychoCoder Your posted markup didn't match up when I answered. Your current code should work, are you getting a 404 on the image? Is there any other relevant html/css that you could post? – Jesse Kernaghan May 25 '15 at 16:53
I tried your changes and now even the box for the image is gone – PsychoCoder May 25 '15 at 17:48

score 0 · Answer 2 · edited May 23 '17 at 12:21

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

Displaying image from within CSS file

2 Answers2