Background image/color not working on body tag

HTML & CSS
1

So Im trying to set the background of my body element. I know my url is correct because the image works as a background for other things like divs and p elements. I thought it could have been a clearfix problem since there are some floated divs within the body tag, but setting the overflow to auto and floating the body didnt change anything, also Iv never had that problem with the body tag. (Side note, my nav is set to fixed position but it still scrolls with the page. Whats even weirder is setting the position to fixed still takes the nav out of the DOM, so any help with this would be great)

Heres my code:
HTML

<html>
    <head>
        <title>Darren Segal - Web and Graphics Professional</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Stylesheets -->
        <link rel="stylesheet" href="css/col.css" media="all">
        <link rel="stylesheet" href="css/2cols.css" media="all">
        <link rel="stylesheet" href="css/3cols.css" media="all">
        <link rel="stylesheet" href="css/4cols.css" media="all">
        <link rel="stylesheet" href="css/5cols.css" media="all">
        <link rel="stylesheet" href="css/6cols.css" media="all">
        <link rel="stylesheet" href="css/7cols.css" media="all">
        <link rel="stylesheet" href="css/8cols.css" media="all">
        <link rel="stylesheet" href="css/9cols.css" media="all">
        <link rel="stylesheet" href="css/10cols.css" media="all">
        <link rel="stylesheet" href="css/11cols.css" media="all">
        <link rel="stylesheet" href="css/12cols.css" media="all">
        <link rel="stylesheet" href="css/slidebars.min.css">
        <link rel="stylesheet" href="css/custom.css">

    </head>

    <body>
        <!-- Main Site Content -->
        <div id="sb-site">
            <a href="#" class="sb-toggle-left"><img src="img/menu.png"></a>
            <!-- Main Navigation -->
            <nav>
                <ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            
            <img id="logo" src="img/logo-header.png">
            
            <h1>About</h1>
            <div class="section group about">
                <div class="col span_1_of_3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor interdum nibh, eget vulputate sapien ornare id. Sed pretium eleifend augue, nec interdum felis volutpat non. Quisque eget lacus neque. Donec nec nibh erat. Vestibulum aliquet magna sit amet ante rutrum, in gravida dolor porta. In sem lacus, condimentum eget lacus sed, vehicula scelerisque nunc. Curabitur vel metus lorem. Integer neque dolor, scelerisque sit amet interdum a, blandit ut ipsum.</p>
                </div>
                
                <div class="col span_1_of_3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor interdum nibh, eget vulputate sapien ornare id. Sed pretium eleifend augue, nec interdum felis volutpat non. Quisque eget lacus neque. Donec nec nibh erat. Vestibulum aliquet magna sit amet ante rutrum, in gravida dolor porta. In sem lacus, condimentum eget lacus sed, vehicula scelerisque nunc. Curabitur vel metus lorem. Integer neque dolor, scelerisque sit amet interdum a, blandit ut ipsum.</p>
                </div>
                
                <div class="col span_1_of_3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor interdum nibh, eget vulputate sapien ornare id. Sed pretium eleifend augue, nec interdum felis volutpat non. Quisque eget lacus neque. Donec nec nibh erat. Vestibulum aliquet magna sit amet ante rutrum, in gravida dolor porta. In sem lacus, condimentum eget lacus sed, vehicula scelerisque nunc. Curabitur vel metus lorem. Integer neque dolor, scelerisque sit amet interdum a, blandit ut ipsum.</p>
                </div>
            </div>

        </div>
        <!-- Your left Slidebar content. -->
        <div class="sb-slidebar sb-left">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <!-- Slidebars -->
        <script src="js/slidebars.min.js"></script>
        <script>
            (function($) {
                $(document).ready(function() {
                    $.slidebars({
                        siteClose: true, // true or false
                        disableOver: 800, // integer or false
                        hideControlClasses: true, // true or false
                        scrollLock: false // true or false
                    });
                });
            }) (jQuery);
        </script>
    </body>
</html>

SCSS
@import ‘variables’;

/* CSS Reset */
* {
	margin: 0;
	padding: 0;
}

@font-face {
  font-family: bigJohn;
  src:  url(../fonts/BigJohn.woff2),
        url(../fonts/BigJohn.woff);
}

body {
    background-image: url(../img/sweater.png);
}

nav {
    position: fixed;
    width: 100%;
    background-color: $indigo;
    box-shadow: 0px 5px 5px grey;
}

#menu {
    overflow: auto;
    width: 50%;
    margin: 0 auto;
	list-style: none;
    background-color: $indigo;
    
    li {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 16px;
        line-height: 50px;

        a {
            display: block;
            font-family: bigJohn;
            text-decoration: none;
            color: aqua;
        }
        
        a:hover {
            color: $indigo;
            background-color: #fff;
        }
    }
}

#logo {
    display: block;
    width: 100%;
    margin-top: 50px;
}

h1 {
    text-align: center;
    font-family: bigJohn, Helvetica, sans-serif;
}

p {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    line-height: 150%;
    text-indent: 30px;
}

Thanks a lot for any help

2

Can you give us the live website? Or an example which showcases this backgroudn image not working? Your pre-processed code doesn’t do much for us.

If you could get us a working demo + the actual link to the image (direct URL), that would help us with our debugging :slight_smile: .

3

So the img folder is at the same level as the folder containing the HTML and the image is in that folder?

4

Yes, directory is this:

Project Folder > index.html, css, scss, js, img (>sweater.png), css

5

Would a CodePen work?

6

It should work. :slight_smile:

7

Anything that replicates your issue is fine :slight_smile: .

8

Problem is I cant link images in a CodePen, how would I do that so we can see the behavior of the background and other images?

9

I assume you don’t have a PRO account.

I’d upload the images to tinypic.com for now.

10

Ah okay, I guess I would need the Pro account. BUT, I figured out the issue, its with slidebars, when I comment out slidebars everything works including the fixed nav. There is a documented issue where they said to add a class and move the fixed position element out of the slidebars wrapper div. This didnt seem to do anything

Heres the documentation for the plugin

http://plugins.adchsm.me/slidebars/usage.php

11

Now Im running into possibly the weirdest thing Iv seen so far. I just got rid of Slidebars completely for now to test some things out. I have the nav set with position fixed and the list items inside have a line-height of 50px. So naturally when I set the position to fixed, the image underneath the nav which has display: block, the very next thing in the DOM, gets shifted up as if it were the very FIRST thing in the DOM. I know this is whats expected, so I set the top margin of the image to 50px. What then happens is the navbar gets a margin of 50 pixels as well. The only way to stop this is to take away display: block on the image, but what if in the future I needed display block? I could just take it off now but I just want to know whats going on for the future. Why would display: block make the margins set for it bleed into the properties of the nav above it?

12

Can we get a code sample (codepen, or a website) where this is taking place? Better to have a broken example, rather than just talk theory :slight_smile: .

13

See the Pen vOXQXY by Darren (@FcknDrrn) on CodePen.

Sorry, couldnt figure out how to have it embedded right in the forum

14

You just paste the URL of the codepen, as is. So next post, just post the URL of the codepen like this

http://codepen.io/FcknDrrn/pen/vOXQXY/

And it’ll embed. Look - I’ll embed your codepen by pasting the URL.

http://codepen.io/FcknDrrn/pen/vOXQXY/

Now, the problem is that your nav uses fixed positioning. This means that the browser is guessing the placement of the nav accordingly. That means that if the image gets 50px of margin, the browser is guessing that the nav should be right on top of that as well, presumably due to the source order, so it will place it accordingly.

Instead of playing with fire, you should actually give positioned elements coordinates. So the nav needs top:0; at the least (it’s good to give x/y coordinates, so perhaps left:0; as well). Some designs don’t allow for both coordinates, but when possible, you should try and give coordinates, so the brwoser doesn’t have to guess :slight_smile: .

15

Okay cool thanks. Im still scratching my head at it works without a designated display property on the image

16

Off the top of my head, dunno. Perhaps it somehow works into the browser calculation when it’s deciding where to place the nav.

It can get screwy; the browser has to guess. Never a good idea to let it do that.

17

This is just margin collapse and the margin top on the block image becomes the margin top on the body element and thus the body moves down by the 50px margin you put on it. This means the fixed nav that has an auto top position starts at the top of the body rather than at the top of the viewport beacuse the body has moved down by 50px.

Margins between nested elements collapse onto the parent if there is no content in-between (which there isn’t when you remove the nav from the flow with fixed positioning).

This can be seen if you colour the html and body elements.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	margin: 0;
	padding: 0;
}
html {background:red}
body {background:blue}
#logo {
	display:block;
	width: 100%;
	margin-top: 50px;
}
</style>
</head>

<body>
<nav>
<img id="logo" src="http://darren-segal.com/images/logo-header.png">
</body>
</html>

Margins on inline elements have no effect but replaced elements like images are treated as inline-block (unless you change their display to block) and margins on inline-block elements do not collapse.

19

try this

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#body {background:blue;}
.logo {
    display:block;
    width:200px;
    margin-top:50px;
}
</style>
</head>
<body id="body">
<img class="logo" src="Image_Path">
</body>
</html>
20

Did you read the thread or try out your code on the OPs problem?

Your code will not help at all as explained in detail in my previous post.

21

So I dont need help with the fixed position stuff anymore, the mobile nav plugin I was using has documented problems with fixed position elements so Im just going to use a different plugin or just use media queries to display: none or remove it with js. (BTW, does display: none take the element out of the DOM, or does it just collapse?)

Im now all of a sudden i cant set a background image on the body element, even without the plugin. I know my directories are correct because I can get them to work on divs within the body

I put the site up temporarily to debug

http://dstest.nfshost.com/

Thanks for all your help