Cannot Display Background Image in Header

See more:

CSS

HTML

bootstrap

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
                </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:

.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?