CODEWITHSUNDEEP
htmlcss
user360907
user360907

Reputation:

Webpage background image won't load

I'm using the following css to define my background:

body
{
    background-image: url('background.png');
    font-size: 12pt;
    font-family: Veranda, Arial, Helvetica, sans-serif;
}

The image background.png is stored in the root directory, but whenever I refresh the webpage, the background remains white. MY instructor currently has a copy of my files and is attempting to figure it out himself, though the problem wasn't obvious to him at a cursory glance. My full html and css are as follows:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<meta http-equiv="content-type" content = "text/html charset = utf-8" />
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<title>
Title
</title>
</head>

<body>
<div id = "wrapper">
    <div id = "leftsidebar">
        <h3> Navigation </h3>
    </div>

    <div id = "content">
        <h1> Heading 1 </h1>
        <h2> Heading 2 </h2>

        <p align = "justify"> Paragraph 1.</p>

        <p align = "justify"> Paragraph 2 </p>

        <p align = "justify"> Paragraph 3 </p>
    </div>
</div>
</body>

</html>

CSS:

<style type = "text/css">
<!--
body
{
    background-image: url('background.png');
    font-size: 12pt;
    font-family: Veranda, Arial, Helvetica, sans-serif;
}

div#wrapper
{
    width: 80%;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;
}

div#header
{
    padding: 15px;
    margin: 0px;
    text-align: centre;
}

div#leftsidebar
{
    width: 25%;
    padding: 10px;
    margin-top: 1px;
    float: left;
}

div#content
{
    margin-left: 30%;
    margin-top: 1px;
    padding: 10px;
}

div#footer
{
    padding: 15px;
    margin: 0px;
    border-top: thin solid #000000;
}
-->
</style>

Upvotes: 0

Views: 1614

Answers (2)

Rocket Ronnie
Rocket Ronnie

Reputation: 1116

html is not allowed in you style.css

You need to remove the <style type = "text/css">, the html comment tag <!-- and obviously the closing tags for each.

You also dont need the ' ' around the background url, it can be written like this.

background-image: url(background.png);

Make those changes, and assuming background.png is in the correct directory it will work.

Upvotes: 1

Pekka
Pekka

Reputation: 449613

CSS files are not supposed to contain

<style type = "text/css">
<!--

I assume that leads to an error parsing the first CSS block (the body one).

Upvotes: 2

Related Questions