Background image for web page

Question

I'm having great trouble in applying a background image with CSS. When I directly apply a background image for the body tag in an HTML style attribute, it works. But when I do the same thing with CSS, it doesn't. Here is my CSS and HTML.

HTML

<!DOCTYPE html>

<!-- Start of HTML -->
<html lang="en">

<head>
    <!-- Meta tags -->
    <meta charset="utf-8" />
    <meta name="description" content="Creating Web Applications" /> 
    <meta name="keywords" content="party equipment" />
    <meta name="author" content="Zaid Shakil" />

    <!--CSS Style File Link -->
    <link rel="stylesheet" href="styles/style.css" />

    <!-- Title of the page -->
    <title>Party Equipment</title>

</head>



<body id="homepage">
    <!-- Header -->
<header>
    <!-- Navigation bar -->
    <nav>
        <ul>
            <li><a href="index.html" class="home">Home</a></li>
            <li><a href="product.html" class="product">Product</a></li>
            <li><a href="enquiry.html" class="enquiry">Enquiry</a></li>
            <li><a href="about.html" class="about">About</a></li>
        </ul>
    </nav>
</header>

    <img id="homepic" src="images/partyhome.png" alt="Party" />

    <h1 class="hometitle">Welcome to Party Equipments Inc</h1>

    <p id="homep"> Hi, We are your experts in party equipments. We are currently offering one product. Browse through our website and checkout our product page to know more about the equipment we are offering and get great deals. <br /> </p>

    <div id="gallery">

    <a href="http://www.bizclassifieds.com.au/sites/67/images/swfimage_3028_1.jpg"><img src="images/example1.jpg" width="500" height="375" alt="Example 1"></a><p>Reference: <a href="http://www.bizclassifieds.com.au/Childrens-Products-&amp;-Services/Party-Equipment-Hire-Established-10-years.htm">Dancing Light</a><p>

    <a href="http://g02.a.alicdn.com/kf/HTB1RbBSHVXXXXX4XVXXq6xXFXXXF/E27-6w-RGB-Led-Bulbs-Mini-Party-Light-Dance-Party-Lamps-Auto-Rotating-DJ-Stage-Disco.jpg"><img src="images/example4.jpg" width="500" height="375" alt="Example 1"></a><p>Reference: <a href="http://www.aliexpress.com/store/product/E27-3w-RGB-Led-Bulbs-Mini-Party-Light-Dance-Party-Lamps-Auto-Rotating-DJ-Stage-Disco/930043_1780846867.html">Dancing Light 2</a></p>

    <a href="https://activedark.files.wordpress.com/2012/12/led_drinkglasses.jpg?w=700"><img src="images/example3.jpg" width="400" height="275" alt="Example 1"></a><p>Reference: <a href="http://activedark.com/2012/12/04/glowing-drinks-will-brighten-any-party/">Glowing Glass</a></p>
    </div>

    <hr />
    <footer>
    1. Logo: https://www.thepartybazaar.com/
    <p id="footer">Copyright 2015 Designed by <a href="mailto:4962516@student.swin.edu.au"> Zaid Shakil </a></p>
    </footer>
</body>

</html>

CSS

/* Navigation Element */

/*h1 {
    margin-top: 100px;
}

nav {
    position: fixed;
    float: none;
    left: 50%;
    margin-left: -300px;
    }*/

nav ul {
    margin: 0 auto;
    padding: 0 auto;
    text-align: center;
}

nav ul li {
    display: inline;
    list-style: none; 

}

nav a {
    text-decoration: none;
    display: inline-block;
    background-color:#343434;
    width: 120px;
    padding: 4px;
    margin-right: -4px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-align: center;

}

nav a:hover {
    color: white;
    background-color: #CF5300 ;
}


/* Homepage Header Image */
#homepic {
    display: block;
    margin: 0 auto;
}

h1.hometitle {
    text-align: center;
    color: black;

}

#homep {
    text-align: center;
    font-size: 20px;
}

footer a:hover {
    color: white;
}

#gallery {
    display: block;
    margin: 0 auto;
    text-align: center;
}

#name {
    text-align: center;
    font-weight: bold;
    font-size: 200%;
}

#number {
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 100%;
}

#course {
    color: rgb(180, 49, 0);
    font-size: 100%;
    font-family: Verdana;
}

#myphoto {
    float: none;
    border: 20px groove #333;
}

footer {
    clear: both;
}

.enquiryp {
    font-family: Arial, Verdana, sans-serif;
    font-size: 30px;
}


aside {
border: 2px inset red;
border-radius: 100px;
margin: 0.5em;
padding: 0.5em;
width: 30%;
float:left;
text-align: center;
clear: both;
}

h1, h2, h3 {
    color: red;
}

article { min-width:30em;}


#dancinglight2 {
    float:left;

}

#dancinglight{
    float: right;
}

#glowingglass
{
    float: right;
}
/*
img {float:left; clear: both;
}*/

.features {
    float: right;
}

.time {
    width: 100;
    height: 100;
}

.row {
    width: 100;
    height: 100;
}

#wed1 {
    background-color: #00ff00;
}
#wed2 {
    background-color: #CB8CFF;
}

#friday {
    background-color: #BABABA;
}

#tues {
    background-color: #4DB8FF;
}

#thu {
    background-color: #FFEE8C;
}

#thu2 {
    background-color: #FF8CD7;
}

#homepage {
    background: url("party.jpg");
}

/*body:before, body:after {
    content: "";
    position: fixed;
    background-image: url("party.jpg");;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 100px solid ;
    border-right: 100px solid;  
}*/

I cannot test your code directly because I don't have all the dependencies. Can you please have a look at [this page](http://www.w3schools.com/cssref/pr_background-image.asp) for help? — Tim Biegeleisen, Sep 11 '15 at 06:07
Works for me if I just take the #homepage: http://jsfiddle.net/mplungjan/6Lvp83mg/ — mplungjan, Sep 11 '15 at 06:08
And with the other css too: http://jsfiddle.net/mplungjan/6Lvp83mg/1/ — mplungjan, Sep 11 '15 at 06:11

score 2 · Answer 1 · edited May 23 '17 at 11:51

Working for me make sure that the image is being found css urls can be different than <img src=""> the path is set relatively from the css file

if your structure is like this

index.html
-css
--style.css
-img
--party.jpg

then in your css the url would have to be

background: url("/img/party.jpg");

or

background: url("../img/party.jpg");

Here's a bit of info thats good to know

Absolute vs relative URLs

score 0 · Answer 2 · answered Sep 11 '15 at 07:22

0

Another solution would be to upload the image to a site like imgur and then replace party.jpg with the direct link (the link that has the file extension of the image within the link).

answered Sep 11 '15 at 07:22

Theo Bearman

79
11

score 0 · Answer 3 · answered Sep 11 '15 at 07:58

First of all, make sure your .jpg is either in the same folder with the .css file. If not, then redirect its path to the .css file like

{
   background-image: url('path/to/bg.jpg');
}

or { background-image: url('../path/to/bg.jpg'); /* if these files are in different folders */ }

but that would not be all for the best results you'll need to set

{
background-image: url('path/to/bg.jpg');
background-size: value; /* ('contain, cover or auto or values') */
background-position: value; /* center would be the best value choice */
background-repeat: value; /* type of repeat */

}

Background image for web page

3 Answers3