简体   繁体   中英

The background image isn't showing up on my page

I'm designing a Neocities site and on one of my pages the background image isn't showing up. I've tried doing it in HTML and CSS but neither will work.

[This] ( https://maggssszzz.neocities.org/spitbucket.html ) is the page in question and this is the image I'm trying to attach.

I initially tried placing it in the head of my HTML like this:

<style>
      background-image: "url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fpngtree.com%2Ffree-backgrounds-photos%2Fabstract-lines&psig=AOvVaw0DqRellrv87omUXChv5XUF&ust=1670010209669000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCOia0u2x2fsCFQAAAAAdAAAAABAU)";
      </style>

But that didn't do anything, so then I thought about putting it in CSS. I tried this 2 different ways and neither worked:

.body {
  text-align: center;
  background-image: url(https://us.123rf.com/450wm/leavector/leavector1901/leavector190100001/leavector190100001.jpg?ver=6);
}
.square {
  text-align: center;
  background-color: #16a868;
  
  line-height: 70px;
  width: 400px;
  height: 800px;
  color: #701ba1;
  margin: 20px auto;
}

and attempt 2:

.body {
  text-align: center;
  
}
.square {
  text-align: center;
  background-color: #16a868;
  background-image: url(https://us.123rf.com/450wm/leavector/leavector1901/leavector190100001/leavector190100001.jpg?ver=6);
  line-height: 70px;
  width: 400px;
  height: 800px;
  color: #701ba1;
  margin: 20px auto;
}

But nothing works. What did I do wrong?

I got it fixed: Here is the working code:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="spitbucket.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?Family=Raleway">
<title>Spitbucket.com</title>
<style>
  h1, p, h2, ul {font-family: "Raleway", sans-serif}
  body {
    background-image: url(https://us.123rf.com/450wm/leavector/leavector1901/leavector190100001/leavector190100001.jpg?ver=6);
  }
</style>

It's working fine. Please check在此处输入图像描述

Use this code

.square {
text-align: center;
background-color: #16a868;
line-height: 70px;
width: 400px;
height: 800px;
color: #701ba1;
margin: 20px auto;
background-image: url(https://www.imgonline.com.ua/examples/two-tone-blurred-background-1-big.jpg);

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM