如何在图像背景上覆盖文本

Question

Here is my CSS

.newbody
{
    background-image:url('Images/CityofChicago.jpg');

    height:600px;
    width:1270px;
    position:relative;

}

.otherstuff
{

     position:absolute;
}

here is my HTML

   <div class="newbody">
      <!--  <img src="Images/CityofChicago.jpg" height="600px" width="1280px" class="image" alt=""/> -->
      some Text

      <div class="otherstuff">
      <ul>
        <li>One </li>
        <li>Two </li>
        <li>Three</li>
      </ul>
      </div>
      </div>

Answer 1

Your code looks right, it is just a matter of getting the right path to your image. If your css is inline in your html document the location of the html document becomes the base, if your css is in a .css file then its location is the base. If your structure is:

• index.html
  • /css
    • style.css
  • /images
    • CityofChicago.jpg

then the line would be background-image:url('../Images/CityofChicago.jpg');