Background image wont show up in CSS
Question
I've been trying to put an image as a background in the HTML element for the past few hours, however, the background somehow won't show up after I put in the navbar, I assume it has something to do with the navbar background taking priority but honestly I have no idea.
HTML, CSS
@charset: "utf-8"; html { background-image: url(../design/background.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: right; } li a { display: block; color: #fff; text-align: center; padding: 27px 60px; text-decoration: none; font-family: 'Abel', sans-serif; } li a:hover { background-color: #7446ad; } #logo { float: left; width: 100px; height: 60px; padding: 5px 5px; }
<.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2.family=Abel&display=swap" rel="stylesheet"> </head> <body> <nav> <div> <ul> <li><a href="#">SUPPORT</a></li> <li><a href="#">STORE</a></li> <li><a href="#">TEAMS</a></li> <a class="navbar-brand"> <img src="asd2.png" id="logo"> </a> </ul> </div> </nav> </body> </html>
The background image won't show up as the background for some reason, even if i change the html selector to body selector. .
2 answers
solution1
0 ACCPTED 2021-03-13 07:19:56
It seems you moved your css into it's own file styles.css but forgot to get rid of the enclosing html <style> tags.
Remove them and in theory i'm confident the image will load.
Also change
@charset: "utf-8";
to
@charset "utf-8";
but this is not relevant to the question.
solution2
-1 2021-03-13 07:27:07
I tried replacing the image you provided, its working. It doesnt look like css issue, but rather with image path you provided in css.
html{ background-image: url(https://placeimg.com/640/480/animals); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } ul{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li{ float:right; } li a{ display: block; color: #fff; text-align: center; padding: 27px 60px; text-decoration: none; font-family: 'Abel', sans-serif; } li a:hover{ background-color: #7446ad; } #logo{ float:left; width: 100px; height: 60px; padding: 5px 5px; }
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet"> </head> <body> <nav > <div> <ul> <li><a href="#">SUPPORT</a></li> <li><a href="#">STORE</a></li> <li><a href="#">TEAMS</a></li> <a class="navbar-brand"> <img src="asd2.png" id="logo"> </a> </ul> </div> </nav> <div> </div> </body> </html>
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.