CODEWITHSUNDEEP
htmlcssimagecolorsbackground
xDrac
xDrac

Reputation: 35

Body background color and image not showing

So.... I have one folder called intro. In this folder are both, the index.html and the style.css files. In the intro folder is another folder called "images" where I store the images I will use. In that folder (images) is an image called background.jpg

The code is as follows: HTML

    <!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <title>test</title>
</head>
<body>

    <div id="content">
        <div class="info">
            Want to know more about Dreams?
        </div>

    </div>
</body>

CSS

    /*CSS Style Sheet*/
@font-face

body {
background-color: #080808;
background-image: url(images/background.jpg);
margin: auto;
}


#content {
width: 1000px;
background-color: #080808;
margin-left: auto;
margin-right: auto;
margin-top: 500px;
}

The background image and the background color aren't showing up though, for some reason. The bg color stays white, the image nowhere to be seen. Help?

Upvotes: 2

Views: 2992

Answers (2)

DaniP
DaniP

Reputation: 38252

One you're missing the "__" on the path for your background-image.

Two change the order and use background instead of background-image.

 body {        
   background:url("images/background.jpg") no-repeat center;
   background-color:blue;
 }

Three a .png file allows you to keep transparent background in your image.

Four Remove the @font-face

Check this demo http://jsfiddle.net/e85kY/

Upvotes: 2

usernolongerregistered
usernolongerregistered

Reputation: 390

You have to map the background image from the location of your HTML file. For example, if images was in your intro folder and your HTML file was in a separate folder in intro it would be ..\image\background.jpg. Also, you do not need the @font-face in your CSS.

While mapping, to go back a folder you would use .. to imply the previous folder in the path.

Upvotes: 1

Related Questions