change background -image whit html and css
Question
I want to put this image as a background under the div in which appears the writing GED SALC but it does not work .. although I have tried with CSS and even forcing it all with this:
<body bgcolor="blue" background="images/sfondo.png">
THIS IS THE CODE :
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</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>GED - SALC</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 } ?>
and this is the image ... BackGround IMAGE
the photo is placed in the right url
Does anyone know how to help me? PS .. I admit that I have used a template ahahaha
5 answers
solution1
0 2018-11-20 14:05:50
You created a CSS class name .bgimg-1 , but you haven't used it anywhere. You likely want <body class="bgimg-1"> in order to assign that CSS to it.
You should also make sure that file exists at the path specified. You can find out in Chrome dev tools by inspecting the <body> and clicking the background URL to open it in a new tab. Either an image will display, or you'll get a 404 error.
solution2
0 2018-11-20 14:11:42
Add the class you created to the body element.
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</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>GED - SALC</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 } ?>
solution3
0 ACCPTED 2018-11-20 14:21:47
You already set bgimg-1 class. All you need to add the class to the body tag. Also, you don't need to force it using background ="images/sfondo.png" in the body tag.
<body class="bgimg-1" bgcolor="blue">
Check the full code below-
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</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>GED - SALC</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 } ?>
solution4
0 2018-11-20 14:23:34
First of all, the attributes "background" and "bgcolor" are old methods and are non-conforming, so you should use CSS background / background-color properties instead.
Second, reading the comments it seems that your path is not correct.
Good luck!
solution5
0 2018-11-20 15:14:05
please add the class attribute in the body tag like this
<body class="bgimg-1">
or just replace it with this
- with regards. kevil
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.