CODEWITHSUNDEEP
htmlcssbackgroundcss-floatnested
AMC
AMC

Reputation: 1695

background color for div

Ideally, <div id="main"> should be 560px wide with a height of 100% and background color #333333. However, this is not so. Briefly, like right after refreshing the page, I can see that the background color is there but once the page finishes loading it disappears. This makes me think there is a conflict somewhere in my CSS, I'm just not sure where. How do I get <div id="main"> to have the background? Here's what I'm working with:

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Parlour</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">
    <header>
    <nav>
        <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">GET IN TOUCH</a></li>
        </ul>
    </nav>
    </header>

    <div id="logo">
    <a href="#"><img src="img/parlour_side.png" alt="Parlour Salon logo" /></a>
    </div><!-- end logo -->

    <div id="main">
    <div class="brief">
        <h2><a href="#"><span>ABOUT PARLOUR</span></a></h2>
        <p>Parlour is blah blah blah.</p>    
        </div><!-- end brief -->
    <div class="brief">
        <h2><a href="#"><span>SERVICES</span></a></h2>
        <p>Parlour offers blah blah blah.</p>
    </div><!-- end brief -->
    <div class="brief">
        <h2><a href="#"><span>PRODUCTS</span></a></h2>
        <p>At Parlour, we believe blah blah blah.</p>
    </div><!-- end brief -->
    <div class="brief">
        <h2><a href="#"><span>GET IN TOUCH</span></a></h2>
        <p>1522 U Street NW<br/>Washington DC<br/>202-986-0080</p>
        <div class="social">
            <a href="#"><img src="img/facebook.png" alt="Parlour Facebook" /></a>
            <a href="#"><img src="img/twitter.png" alt="Parlour Twitter" /></a>
            <a href="#"><img src="img/youtube.png" alt="Parlour YouTube" /></a>
            <a href="#"><img src="img/yelp.png" alt="Parlour Yelp" /></a>
        </div><!-- end social -->
    </div><!-- end brief -->


    </div><!-- end main -->
</div><!-- end container -->
</body>

CSS

/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
    background: url(img/background.jpg) no-repeat center center fixed; 
    background-size: cover;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: url('img/background.jpg');
    font-family: nevis-webfont;
    color: #ffffff;
}

ol, ul {
    list-style-type: none;
}

/* Type */

@font-face {
    font-family: nevis-webfont;
    src: url('type/nevis-webfont.eot');
    src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/nevis-webfont.woff') format('woff'),
         url('type/nevis-webfont.ttf') format('truetype'),
         url('type/nevis-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
    font-size: 125%;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
}

h2 {
    font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
    font-size: 125%;
    font-weight: normal;
    line-height: 1.5;
}

h3 {
    font-family: nevis-webfont;
    font-size: 75%;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
}

p {
    font-family: nevis-webfont;
    font-size: 75%;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Basic */

#container {
    width: 100%;
}

#logo {
    float: left;
    margin-left: 100px;
    margin-top: 200px;
}

/* Header */

nav {
    background: #333333;
    height: 35px;
    width: 100%;
}

nav ul {
    background: #333333;
    margin-left: 220px;
    padding-bottom: 5px;
    padding-top: 5px;
}

nav ul li {
    background: #333333;
    display: inline;
}

nav ul li a {
    background: #333333;
    color: #ffffff;
    font-family: nevis-webfont;
    font-size: 75%;
    letter-spacing: 1px;
    text-decoration: none;
    margin: 0 16px;
}

/* Main */

#main {
    background-color: #333333;
    height: 100%;
    width: 560px;
    margin-left: 230px;
    margin-top: 200px;
    overflow: hidden;
}

#main .brief h2 span {
    color: #ffffff;
    text-decoration: none;
}

JSFiddle though that isn't quite what I'm seeing, so here's a screen cap of the local site.. image

Upvotes: 1

Views: 1675

Answers (1)

MarcoK
MarcoK

Reputation: 6110

Your CSS reset is not correct. A CSS reset should only be used to remove some default styling for the selected elements, but you also apply the background image that you only want to add to the HTML (and not to each div etc.). Simply remove the background properties from the CSS and move it to use only your HTML and you're ready to go.

html { background: url(img/background.jpg) no-repeat center center fixed; 
        background-size: cover; }

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
    /* Other reset properties */
}

Here's the Fiddle (another background image used).

Upvotes: 2

Related Questions