Question

I am coding a website for my kids and it is also an assignment for a class. I am trying to put an image in the body as a background with having text on top of it. The image finally did show up however the floating box above it is mid page and will not float right to the edge of the page. I am including the .css file. The image file is in the same file as everything else and there is a link to the file.

h1 {
    color: green;
    text-align: center;  
}

h2 {
    color: green;
    text-align: center;
}

#header {
height:100px;
background:black; 
text-align: center;
text color: green;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:1000px;
    margin:0;
    dislay:block;
    color: #000000;
    background-image:url('trees.jpeg') &nbsp;
    background-repeat: no-repeat;

}

#footer {
    height:50px;
    background:black;
    text color:green;
    text-align:left-side;
}

#content {
    height:1000px;
}

table {
        width:100%;
    Height:500px;
}

The link in the page looks like so

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dio.css">
</head>

My homepage is set up differently so I entered the information for the image straight into the page as it is not linked. This is the head.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #header {
            height:100px;
            background:green;
        }
    </style>

    <style>
        h1 {
            color:black;
            text-align: center;
        }
    </style>

    <style>
        h2 {
            color: green;
            text-align: center;
        }
    </style>

    <style>
        p {
            text color:blue;    
        }

    </style>

    <style>
        #sidebar {
            width:10%;
            height:1000px;
            float:left;
        }
    </style>

    <style>
        #content {
            float:left;
        }
    </style>

    <style>
        #advertising {
            width:10%;
            height:1000px;
            float:right;
        }
    </style>

    <style>
        #footer {
            height:50px;
            text-align:center;
            background:green;
            text color:black;
            clear: both;
        }
    </style>
    <style>
        body {
            margin:0;
            padding:0;
            width:100%;
            height:1000px;
            margin:0;
            dislay:block;
            color: #000000;
            background-image:url('trees.jpeg') &nbsp;
            background-repeat: no-repeat;
        }
    </style>
</head>

What am I doing wrong? I researched the issue an have been trying different things to no avail.

Answer 1

I see an   at the end of the background-image property. Try replacing it with the semicolon.

Also, for your homepage, you can combine the styles under one <style> tag.

Answer 2

我能够使用以下HTML和CSS修复背景问题：

HTML标题

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="dio.css">
  <link href='https://fonts.googleapis.com/css?family=Exo:400,700italic' rel='stylesheet' type='text/css'>
  <script src="dio.js"></script>
  <script>
      window.alert("Welcome to our DIO site!")
  </script>
  <script>document.getElementById('someId').style.color = '#00FF00';</script>
  <style>
      body {
          height:1150px;
          width:1280px;
      }

      #advertising {
          background:olive;
          width:20%;
          height:1000px;
          float:right;
      }

      #sidebar {
          height:1000px;
      }

      #footer {
          height:50px;
          width:1280px;
          background:black;
          text-align:center;
          clear:both;
      }

      p {
          font-size: 22pt;
      }

      #content {
          text-align:center;
      }
  </style>
  </head>

和CSS

h1 {
    color:#ADFF2F;
    text-align: center;
    font-weight: bold;
}

h2 {
    color:#ADFF2F;
    text-align: lcenter;
    font-weight: bold;
}

p, strong, summary, section, h3, p2 {
    color:#ADFF2F;
    font-weight: bold;
}

a {
    font-weight:bold;
    text-decoration:none;
}

a, h1, h2, p, strong, summary, section, h3, p2 {
    font-family: 'Exo', sans-serif;
} 

a:link {
    color:#FF69B4;
}

a:active {
    color:#e03a3e;
}

a:hover {
    color:#e03a3e;
}

header {
    height:100px;
    width:1280px;
    background:black; 
    text-align: center;
    font-weight: bolder;
}

html {
    background:url('trees.jpg') #98FB98 no-repeat;
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.4);
}

#content {
    float:left;
    box-sizing:border-box;
    display:inline-block;
    width:60%;
    height:1000px;
}

#sidebar {
    background:olive;
    width:20%;
    float:left;
}

table {
    width:1020px;
}

table, th, td {
    border: 1px solid black;
    padding:5px;
    border-collapse:collapse;
    color:#00FF00; 
    font-weight: bold;

}

thead {
    background: #3056A0;
    color: white;
    font-weight: bold;
}

table > caption {
    font-weight: bold;
}

tfoot {
    font-size: 0.75em;
    text-align:right;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background: #808000;
    font-weight: bold;
}

tbody tr {
    background: #808000
    font-weight: bold;
}

footer {
    height:50px;
    width:1280px;
    background:black;
    text-align:center;
    clear:both;
}

#salesDetails, #contactList {
    border: 1px solid #999999;
    margin: 15px;
    padding:15px;
}

label {
    width:150px;
    display: inline-block;
    vertical-align: top;
}

input {
    width:200px;
}

.formRow {
    margin-bottom:10px;
}

HTML5 Issue with backround-image and accompanied float image above it. Also cannot adjust opacity.

2 个答案: