CODEWITHSUNDEEP
javascripthtmlcssweb-deployment
SpareTech_O
SpareTech_O

Reputation: 29

Why is my background image not working?

I been trying to solve this for a few days now. My background image isn't showing but the image size (blank space) does. Here is my code HTML

<div id="contact">
<p>Let talk! contact us via e-mail, phone or text coming soon</p>
</div>

CSS

#contact{
 background-image: url("C:\Users\omar\Pictures\notaryweb/redphone.JPG");
width: 100%;
height: 105%;
background-repeat: no-repeat;
}

Also not sure if this matters but I have 

body{
background-color: #dddddd;
}

in the beginning of my css sheet, and the background image is in the "body". Thanks in advance for all your help, very detail answers are preferred.

Upvotes: 0

Views: 590

Answers (5)

Sanau
Sanau

Reputation: 7

You should change C:\Users\omar\Pictures\notaryweb/redphone.JPG to C:\Users\omar\Pictures\notaryweb\redphone.JPG.

Also you should change height: 105% from percentage to height: 105px.

Upvotes: 0

Shwet Mahalgi
Shwet Mahalgi

Reputation: 31

It is always a better practice to keep your images in the context path of your web. Better to create an images folder in your web and use it. Doing so, will also not require you to replace your forward slashes with backward slashes.

Upvotes: 0

Khan
Khan

Reputation: 51

you are making slash mistake please put back slash "\"

wrong: url("C:\Users\omar\Pictures\notaryweb/redphone.JPG")

correct: url("C:\Users\omar\Pictures\notaryweb\redphone.JPG")

and make sure you have picture available on this path.

Upvotes: 0

Vipin Kumar
Vipin Kumar

Reputation: 6546

You have to use file:/// in your path. like below

background-image: url("file:///C:/Users/omar/Pictures/notaryweb/redphone.JPG");

Also, make sure file do exist.

Upvotes: 0

narayan maity
narayan maity

Reputation: 323

You can do two things........ 1st thing changing the image location and save where you save your html file ... 2nd thing

#contact{
 background-image: url("C:\Users\omar\Pictures\notaryweb\redphone.JPG");
width: 100%;
height: 105%;
background-repeat: no-repeat;
}

use this your mistake is you use forward slash it will be backward slash..

Upvotes: 1

Related Questions