background image not displaying in html css
Question
This is my css code:
body
{
background-image:url("C:\xampp\htdocs\try\images\bg.jpg");
}
This is my html code:
<!DOCTYPE html>
<html>
<head> <title> HOPE Centre </title> </head>
<link rel="stylesheet" type="text/css" href="style1.css" media="all" />
<body>
<div id="wrapper">
<!--header-->
<header>
<div class="header">
<h1><img src="C:\xampp\htdocs\try\images\logo.png" alt="HOPE Centre" style="width:146px;height:83px></h1>
<nav>
<ul id="top_nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">LogIn</a></li>
</ul>
</nav>
</div> <!--end of div header-->
</header>
<!--main navigation-->
<div class="nav">
<a href="index.php">Home</a>
<a href="#">About</a>
<a href="#">How to Help</a>
<a href="#">Contact</a>
</div> <!--end of div nav-->
</body>
</html>
Also the image in the heading is not displaying.
The above code just displays a white background. I am using Google Chrome Version 37.0.2062.103 m. How should I fix this?
5 answers
solution1
0 2014-09-10 19:43:46
This has always worked for me. Best of luck!
body
{
background-image:url("file:///C:/xampp/htdocs/try/images/bg.jpg");
}
solution2
0 2014-09-10 19:43:50
Use this:
body
{
background-image:url("images\bg.jpg");
}
solution3
0 ACCPTED 2014-09-10 19:45:38
Try
body{background-image:url("../try/images/bg.jpg");}
or
body{background-image:url("../../try/images/bg.jpg");}
where
Start with "/" returns to the root directory and starts here
Start with "../" moves one directory backwards and starts here
Start with "../../" moves two directories backwards and starts here
solution4
0 2014-09-10 22:11:27
Local pages frequently have a problem with loading local file:/// resouces. Use http://localhost/try/images/bg.jpg , since I see you're using xampp.
solution5
0 2016-12-28 13:17:18
try do this.. First of all, paste the image file where html file store like file name is "html.jpeg" And check your image format like .jpg,.jpeg,.png etc
Doesn't matter of type format is capital form.
body {
background-image: url("html.jpeg");
}
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.