Click here to Skip to main content
15,884,298 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:
<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
        <div class="hidden-xs col-sm-2">

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:
.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?
Updated 30-Apr-15 0:31am

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

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

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

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

... hope it helps.
Share this answer

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