my background image is not showing and appears grey in my html/css. kindly help. i combine my css and html in one sheet
Question
<html>
<head>
<style>
{
margin:auto;
padding:auto;
}
.top{
width:100%;
background-color:#008000 !important;
border-bottom:2px solid #008000;
}
.top div{
width:1200px;
color:#fff;
background-color:#800000 !important;
font-family:calibri;
padding:10px;
text-align:right;
}
.logo{
width:100%;
background-color:;
border-bottom:2px solid #f0f0f0;
}
.logo div{
width:1200px;
background-color:;
font-family:calibri;
padding:10px;
text-align:left;
}
.logo div table a{
padding:10px;
text-decoration:none;
color:gray;
}
.logo div table a:hover{
color:#428bca;
border-bottom:2px solid gray;
}
.middle{
width:100%;
border-bottom:2px solid #f0f0f0;
}
.middle div{
width:1200px;
height:400px;
font-family:calibri;
}
.middle div p{
width:1000px;
font-weight:bold;
height:300px;
color:#fff;
opacity:0.2;
font-size:50px;
background-color:#000;
}
.bottom{
width:100%;
background-color:;
border-bottom:2px solid #f0f0f0;
}
.bottom div{
width:1200px;
color:#fff;
background-color:;
font-family:calibri;
text-align:right;
}
.bottom div table{
padding-top:30px;
width:1100px;
text-align:justify;
color:gray;
font-size:20px;
}
.bottom_up{
width:100%;
background-color:;
border-bottom:2px solid #f0f0f0;
}
.bottom_up div{
padding-top:20px;
width:1200px;
text-align:center;
background-color:;
font-family:forte;
font-size:30px;
padding-bottom:20px;
}
.bottom_up div table{
padding-top:30px;
font-size:30px;
width:1100px;
text-align:center;
background-color:;
font-family:calibri;
}
input[type="text"]{
padding:12px;
width:250px;
}
select{
padding:12px;
width:250px;
}
textarea{
padding:50px;
width:550px;
}
button{
width:550px;
padding:10px;
color:#fff;
font-size:20px;
background-color:#2FA5EB !important;
}
.nav_down{
width:100%;
background-color:#008000 !important;
border-bottom:2px solid #f0f0f0;
}
.nav_down div{
width:1200px;
color:#fff;
background-color:#800000;
font-family:calibri;
padding:10px;
text-align:left;
}
</style>
<title> Longclaw Expeditions </title>
</head>
<body>
<div class="top">
<div>
Contact Us +254712345678 | info@longclawexpeditions.com
</div>
</div>
<div class="logo">
<div>
<table>
<tr>
<td width="600px" style="font-size:50px;font-family:Arial Black;"> <font color="#008000"> LONGCLAW </font><font color="#800000
"> EXPEDITIONS</font> </td>
<td> <br> <br>
<font size="4px">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT US</a>
<a href="destination.html">DESTINATION</a>
<a href="blogs.html">BLOGS</a>
<a href="contact.html">CONTACT US</a>
</font>
</td>
</tr>
</table>
</div>
</div>
<div class="middle">
<div style="background-image:src('Users\brian\Documents\Website KCITI\shoebill-uganda.jpg');">
<p>
<br> <br>
Tours and Travel <br>
<font size="5px"> The Wildlife and Birding Gurus </font>
</p>
</div>
</div>
<div class="bottom">
<div>
<table border="0">
<tr>
<td width="700px">
<H1><font color="#008000"> Longclaw Expeditions </font></H2>
<H2><font color="#800000" size="5px"> Don’t Listen to Them, Go and See by Yourself.</font></H2> <br> <br>
Since 2015, Longclaw Expedition has been focused on bringing our customers the best in esteem and quality travel game plans. We are enthusiastic about movement and sharing the world’s marvels on the relaxation travel side, and giving corporate explorers the best services to encourage their business travel needs. <br><br>
A solid and “believed” travel brand of Africa, our qualities incorporate a vast and faithful client base, a multi-channel stage for relaxation and business explorers, a powerful portable eco-framework for a range of voyagers and providers. Below are some of the services we offer.<br><br>
<ul>
<li> Airport Transfers
<li>Beach Safari
<li>Bush Safari
<li>Birding Safari
<li>Hotel Booking and Reservation
</ul>
<br>
</td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="bottom_up">
<div>
<H2>Book a Safari</H2>
<table>
<tr>
<td width="500px"> </td>
<td> <input type="text" placeholder="First Name">
<td> <input type="text" placeholder="Last Name">
</tr>
<tr height="30px">
</tr>
<tr>
<td width="500px"> </td>
<td> <input type="text" placeholder="Email Id">
<td> <input type="text" placeholder="Mobile No">
</tr>
<tr height="30px">
</tr>
<tr>
<td width="500px"> </td>
<td> <select> <option> -- Adults -- </option> <option> 1 </option> <option> 2 <option> 3 <option> 4 <option> 5 <option> 6 <option> </option> </select>
<td> <select> <option> -- Kids -- </option> <option> 1 </option> <option> 2 <option> 3 <option> 4 <option> 5 <option> 6 <option> </option> </select>
<td> <select> <option> -- Game Park -- </option> <option> Maasai Mara </option> <option> Tsavo National Park <option> Amboseli Natoina Park <option>Samburu National Park <option> Nairobi National Park <option> Nakuru National Park <option> </option> </select>
</tr>
<tr>
<td> <input type="text" placeholder="Booking date">
</tr>
<tr height="30px">
</tr>
<tr>
<td width="500px"> </td>
<td colspan="2"> <textarea placeholder="Message"> </textarea>
</tr>
<tr height="30px">
</tr>
<tr>
<td width="500px"> </td>
<td colspan="2"> <button> SUBMIT </button>
</tr>
</table>
</div>
</div>
<div class="nav_down">
<div>
© Longclaw Expeditions
</div>
</div>
</html>
this is the code. I have the image saved in my computer. even though is use the src tag it still does not work. What can I change in order for the background image to appear where it says tours and travel? the fist part is the css code that has the style tag followed by the html tag. i have a problem at the div style background image tag. i think i have the right code but the image appears as a grey background.
1 answers
solution1
0 2021-12-24 13:48:05
There are 2 issues in the snippet you provided.
A) It should be style="background-image:url('path-to-background-image');" instead of style="background-image:src('path-to-background-image');"
B) The path-to-background-image is relative, so:
- If you are serving the page (say at
http://localhost:8080), then the image is being looked for at the pathhttp://localhost:8001/Users/brian/Documents/Website%20KCITI/shoebill-uganda.png - If you are opening the HTML file directly in the browser, then the image is being looked for at
path-to-html-file/Users/brian/Documents/Website%20KCITI/shoebill-uganda.png
You need to use the right syntax with the right path.
Generally, the images used in a web page are placed in the same directory as the source code (say in a separate images folder) to avoid such issues.
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.
Related Question
Need help. Basic HTML/CSS. Headers not changing color
Background image not showing. CSS. Header 1. HTML5
Html and css. My div class doesn't react to css
HTML/CSS. need help just making my border fill the entire width of the screen
My CSS background image is not showing
I am new to CSS. My background image is not loading. I am using external CSS, and my OS is windows
my CSS style sheet is not linking to my html
HTML and CSS. Bug: Appending 1px border when i make my scale more
How do I make a specific part of my website look like this? (Using HTML and CSS.)
How to display my background-image in my html/css?
Related Tags