Click here to Skip to main content
15,561,907 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using VS2013 Community with Bootstrap as my main CSS provider. I want a background image to be displayed in the header of the website I am developing. I have the following HTML:
HTML
<div class="container header">
    <div class="row bg" style="height: 170px">
        <div class="col-xs-12 col-sm-10">
            <nav class="pull-right" style="padding-top 100px">
                <ul class="nav navbar-nav">
                    4 <li>..</li>s removed
                </ul>
            </nav>
        </div>
        <div class="hidden-xs col-sm-2">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

I also have the following CSS to define my background image, which has been placed in a separate Site.css file in the Content folder:
CSS
.bg {
    background-image: url('~/Content/Graphics/ClubHeader.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

If I place the cursor on the url above, I get a display of the image I am expecting, which shows the url is correct.

However, when I run the code, the background image is not displayed. Everything else is displayed exactly as I would expect. Could anybody please explain why the image is not displayed?
Posted
Updated 30-Apr-15 1:31am
v2

Use firebug / developer tool (or similar tools) and inspect that element. I am guessing the image URL that is generated is not correct. You will also know if there is any other issue.
Let us know if you are still not able to determine the issue.
 
Share this answer
 
v2
Hi,

The tilde mark ~ is a web application root operator used to resolve urls in asp.net, and cannot be used in the same way within CSS.

If you change ...
CSS
background-image: url('~/Content/Graphics/ClubHeader.jpg');


to ...
CSS
background-image: url('/Content/Graphics/ClubHeader.jpg');


... hope it helps.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900