Image background not loading with CSS
Question
Okay I can't comment on any other questions that's why I am posting a new question.
I've tried all solutions suggested in this answer, this as well.
#head { text-align: center; font-family: roboto; } body, html { height: 100%; } .parallax { background-image: url('.../pics/parallax.jpg'); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/text.css"> <script src="scripts/jquery-3.1.0.min.js"></script> <script src="scripts/jquery.animate-color.js"></script> <script src="scripts/custom_scripts.js"></script> <title>Yadullah.me</title> </head> <body> <h1 id="head"> Hi there!</h1> </body> </html>
Pretty simple right? But for some reason the background image just refuses to show up.
I have tried with my CSS, HTML, and image in the same folder with no success. Tried in different sub-directories, no success.
I have checked file name, extension and all of that stuff. Tried without quotes and what not. Tried different images even. Tried removing all other CSS files as well, nothing works.
3 answers
solution1
3 2016-12-15 19:29:13
You have a few too many stops in your style property. Your css should look like this:
.parallax {
background-image: url('../pics/parallax.jpg');
...
}
solution2
0 2016-12-15 19:32:22
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../
height: 100%;
width:100%; //and try add width
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
solution3
0 2016-12-15 20:53:20
You can try add base tag for example like this
<!doctype html>
<html>
<head>
<base href="http://YourSite.com/">
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</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.