How can I make the background of an HTML div black?

Question

I'm dynamically loading some HTML stored on disk into a div like so:

$('#FictionContent').load('Content/HuckFinn.html');

To give some context:

    $(document).ready(function () {
            $('#tabs').tabs({
                beforeActivate: function(event, ui) {
                    if (ui.newTab.index() == 0) { // index 0 is fiction
                        $('#body').removeClass('bronzeBackground silverBackground goldBackground').addClass
('bronzeBackground');
                        $('#FictionContent').load('Content/HuckFinn.html');

FictionContent is defined like this:

<div id="FictionContent" class="clearfix">Content in Fiction tab</div>

And here it is with some context:

<div id="tabs" class="content-wrapper">
<ul>
    <li><a href="#tab-Fiction">Fiction</a></li>
    <li><a href="#tab-Nonfiction">Nonfiction</a></li>
    <li><a href="#tab-MiscTwain">Miscellaneous</a></li>
</ul>
<div id="tab-Fiction">
    <select id="fictionDropDown">
        <option value="HuckFinn">Huck Finn</option>
        <option value="TomSawyer">Tom Sawyer</option>
        <option value="tPatP">Prince and the Pauper</option>
        <option value="ConnYank">Connecticut Yankee</option>
        <option value="Gilded">The Gilded Age</option>
        <option value="Puddnhead">Pudd'nhead Wilson</option>
        <option value="ShortStories">Short Stories</option>
    </select>
    <div id="FictionContent" class="clearfix">Content in Fiction tab</div>
</div>

The clearfix CSS class used by FictionContent is in Site.css was this:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

I added this to it:

background-color: black;

...but to no avail - did not change the background color.

I also tried adding this to the top of the HTML file I'm loading (HuckFinn.html):

<style>
    background-color: black;
</style>
<h1>The Adventures of Huckleberry Finn</h1>

With some context:

<style>
    background-color: black;
</style>
<h1>The Adventures of Huckleberry Finn</h1>

<h3>Scene:  The Mississippi Valley Time:  Forty to fifty years ago</h3>
. . .

This didn't work, either.

So how can I make the background black, as I do here:

?

Answer 1

A simple fix would also be to add this after your load line in your JS.

 $('#FictionContent').css('background-color', '#000000');