Body background image not displaying

StackOverflow https://stackoverflow.com/questions/23686088

  •  23-07-2023
  •  | 
  •  

Question

I'm trying to set a background image to body element but it's not being displayed, i checked the directory several times and the image name and extention, everything seems fine but the image is not displayed :/

my CSS 

body {
    margin: 0px;
    padding: 0px;
    font-family:'Muli', sans-serif;
    background-image:url('images/back.jpg');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:center;
    height: 100%;
}
header {
    background-image:url('images/wallpaper1.jpg');
    background-repeat:repeat-x;
    margin: 0px;
    padding: 0px;
    min-height:150px;
}
.zoom {
    height: 140px;
    margin: 20px;
    position: relative;
    -webkit-shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
    -moz-shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
    shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
}
#wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    /* works with row or column */
    flex-direction: row;
    /* -webkit-align-items: center;
   align-items: center;*/
    -webkit-justify-content: center;
    justify-content: center;
}
#main {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
}
#ajax-main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    /* works with row or column */
    flex-direction: row;
    /* -webkit-align-items: center;
   align-items: center;*/
    -webkit-justify-content: center;
    justify-content: center;
    background-image:url('images/mohammed meme2.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}
#content {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width:500px;
    min-height:300px;
    text-align: center;
    padding-top:2em;
}
#content > a {
    margin: 0 auto;
    text-decoration:none;
    font-size:1.875em;
    font-weight: bold;
    color: #2c67ac;
}
.tabbed_area {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
ul.tabs {
    margin:0px;
    padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tabs li {
    list-style:none;
    display:inline;
}
ul.tabs li a {
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
}
ul.tabs li a:hover {
    background-color:#2f343a;
    border-color:#2f343a;
}
ul.tabs li a.active {
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54;
}
.content {
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54;
    font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 {
    display:none;
}
.content ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.content ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:15px;
    padding-bottom:15px;
    font-size:13px;
}
.content ul li:last-child {
    border-bottom:none;
}
.content ul li a {
    text-decoration:none;
    color:#3e4346;
}
.content ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    position:relative;
    left:4px;
    top:0px;
}
.content ul li a:hover {
    color:#a59c83;
}
.content ul li a:hover small {
    color:#baae8e;
}

And html

<!DOCTYPE html>

<html>
    <head>
        <title>Winter Olympics' Champions</title>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
        <meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." />
        <meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" />
        <link rel="stylesheet" type="text/css" href="styles/stylewinter.css" />


    </head>
    <body>
        <header>
            <div id="tagline">
                <h1>Winter Olympics' Champions</h1>
                <h2>the best in their category</h2>
            </div>
        </header>

        <nav>
            <div id="wrapper">
                    <a class="loadnew" href="skiing.php"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a>
                    <a class="loadnew" href="biathlon.php"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a>
                    <a class="loadnew" href="bobsleigh.php"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a>
                    <a class="loadnew" href="icehokey.php"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a>
                    <a class="loadnew" href="luge.php"><img class="zoom" src="images/luge.png" alt="luge" /></a>
                    <a class="loadnew" href="skating.php"><img class="zoom" src="images/skating.png" alt="skating" /></a>
        </div>
        </nav>

        <div id="contentwrapper">
            <div id="ajax-main">

            </div>
        </div>

        <footer>
        </footer>
        <script src="scripts/my_scripts.js"></script>
    </body>
</html>
Was it helpful?

Solution

Are you on OS X?

If so and you have confirmed the path to the image is correct, it could be a quarantined file with extended attributes.

Read this SO post for info on how to resolve: How do I remove the "extended attributes" on a file in Mac OS X?

OTHER TIPS

Everything seems fine

I tried you code and it works fine.

please check your console (pressing f12 button on your browser) and see what error are you getting.

Check out weather you took in consideration your folders hierarchy. For example if your css file is in the /css folder and your image is in your /images folder and both folders are in your main folder, then the url images/back.jpg in your css file points to /css/images/back.jpg, which is not correct.

You can either prepend a dot to your image address, which means "go to parent directory" (meaning get out of /css and then look for /images) or you can move your /images folder to your css folder, whichever is more comfortable for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top