使用 html 和 css 更改背景图像

Question

我想把这张图片作为背景放在div下面，其中出现了文字G.E.D S.A.L.C 但它不起作用..虽然我已经尝试过 CSS 甚至用这个强制这一切：

<body bgcolor="blue" background="images/sfondo.png">

这是代码：

<!DOCTYPE html>
<?php 
 session_start();
    if(!isset($_SESSION["username"])){
     header('location: ../index.php');
    }else
    {
    
?>
<html>
 <head>
    <title>G.E.D.</title>
  <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .bgimg-1{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/sfondo.png");
    min-height: 100%;
   }
  </style>
 </head>
 <body bgcolor="blue" background="images/sfondo.png">
  <div class="w3-top">
   <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107">
    <h1>G.E.D. - S.A.L.C.</h1>
   </div>   
  </div>
   <div class="w3-display-middle w3-contener" >
    <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
    <div class="w3-center" style="margin-top: 40px;">
     <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a>
     <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
     
    </div>
   </div>
 </body>
</html>
<?php } ?>

这是图片... BackGround IMAGE

照片放在右边url

有谁知道如何帮助我吗？ PS ..我承认我用了模板啊哈哈哈

Answer 1

您创建了一个 CSS class 名称 .bgimg-1，但您没有在任何地方使用过它。您可能需要 <body class="bgimg-1"> 以便将 CSS 分配给它。

您还应该确保该文件存在于指定的路径中。您可以在 Chrome 开发工具中找到，方法是检查 <body> 并单击背景 URL 在新选项卡中打开它。将显示图像，否则您将收到 404 错误。

Answer 2

将您创建的 class 添加到 body 元素。

<!DOCTYPE html>
<?php 
 session_start();
    if(!isset($_SESSION["username"])){
     header('location: ../index.php');
    }else
    {
    
?>
<html>
 <head>
    <title>G.E.D.</title>
  <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .bgimg-1{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("https://i.stack.imgur.com/TYX0B.png");
    min-height: 100%;
   }
  </style>
 </head>
 <body class="bgimg-1" bgcolor="blue" background="images/sfondo.png">
  <div class="w3-top">
   <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107">
    <h1>G.E.D. - S.A.L.C.</h1>
   </div>   
  </div>
   <div class="w3-display-middle w3-contener" >
    <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
    <div class="w3-center" style="margin-top: 40px;">
     <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a>
     <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
     
    </div>
   </div>
 </body>
</html>
<?php } ?>

Answer 3

您已经设置了 bgimg-1 class。您只需要将 class 添加到 body 标签即可。此外，您不需要在 body 标签中使用 background ="images/sfondo.png" 强制它。

  <body class="bgimg-1" bgcolor="blue">

查看下面的完整代码-

<!DOCTYPE html>
<?php 
 session_start();
    if(!isset($_SESSION["username"])){
     header('location: ../index.php');
    }else
    {
    
?>
<html>
 <head>
    <title>G.E.D.</title>
  <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .bgimg-1{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("https://i.stack.imgur.com/TYX0B.png");
    min-height: 100%;
   }
  </style>
 </head>
 <body class="bgimg-1">
  <div class="w3-top">
   <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107">
    <h1>G.E.D. - S.A.L.C.</h1>
   </div>   
  </div>
   <div class="w3-display-middle w3-contener" >
    <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a>
    <div class="w3-center" style="margin-top: 40px;">
     <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a>
     <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma  </a>
     
    </div>
   </div>
 </body>
</html>
<?php } ?>

Answer 4

首先，属性"background"和"bgcolor"是老方法，不符合规范，所以你应该改用CSS background / background-color属性。

其次，看了评论好像你的路径不对。

祝你好运！

Answer 5

请在正文标签中添加class属性像这样

<body class="bgimg-1">

或者直接替换为这个

问候。凯维尔

使用 html 和 css 更改背景图像

change background -image whit html and css

html

javascript

css

image

background-image