CODEWITHSUNDEEP
htmlcss
Abdirizak Obsiye
Abdirizak Obsiye

Reputation: 285

CSS background image not showing?

The background image is not appearing for the body section in CSS. I've tried various things such as background: rather than background-image in css and I've tried url("path") and url(path) and url(../path) and url("(../path) and still nothing O.O Help!

Update: I found various solutions. I believe creating a folder within my css folder called images made it easier to find. Also, not using \ and using / instead. Using an online host. Thank you all. I am very satisfied.

HTML:

<DOCTYPE! html>
<html>
<head>
<title>Hoola</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Abdi\Desktop\CSS\Navigationfromleftstyle.css"/>
</head>
<body >
<div class="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
</ul>
</div>

</body>

</html>

Navigationfromleftstyle.css:

html{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;

}

body {

    max-height:100%;
    width:100%;
    margin:0;
    background:url("C:\Users\Abdi\Desktop\cartographer\cartographer\cartographerbig.png");
    padding:0;

}

.nav {

    width:100px;

}

Upvotes: 1

Views: 13350

Answers (5)

Ketan Panchal
Ketan Panchal

Reputation: 148

You have to use relative path. like: 'http://www.google.com/images/1.png'

just create one directory images beside your css folder and put your images inside that folder and you can give body path like

body {
max-height:100%;
width:100%;
margin:0;
background:url("../../images/Chrysanthemum.jpg");
padding:0;

}

this will help

Upvotes: 0

Dexter
Dexter

Reputation: 9344

try this.

body {
     background:url("img/01.png"); /*  location: root  */
     background:url("../../img/01.png"); /* location: outside your current folder */
     background:url("/website/projectname/gallery/img/01.png");   /* your localhost */
     background:url("http://www.thephotoargus.com/img/01.jpg");   /* external site */
     }

Upvotes: 0

Shlomi Haver
Shlomi Haver

Reputation: 974

You can host your image on your web server. But there is another nice solution, you can go to this site and load your image and then get css code for that image and this should load your image as you wish. it's called base64 encoding.

And if you want to run it from a local folder without an local server you should use the file:/// keyword like this:

file:///C:/Users/Abdi/Desktop/cartographer/cartographer/cartographerbig.png

and note that you should use / instead of \

Upvotes: 1

Shivam
Shivam

Reputation: 403

try replacing the url background:url("C:\\Users\\Abdi\\Desktop\\cartographer\\cartographer\\cartographerbig.png"); http://validator.w3.org/#validate_by_input The "\" should not be used instead use "/"

Upvotes: 0

Shrikant Mavlankar
Shrikant Mavlankar

Reputation: 1153

Keep the required image in your project directory and make the following changes.

body {

    max-height:100%;
    width:100%;
    margin:0;
    background-image:url("images\cartographerbig.png");
    padding:0;

}

Edited:

Lets say the page your executing is index.html.

If your have not created any directory then create one directory/folder called my_website(name it as per your requirement) and paste the index.html file inside my_website folder.

Now create another folder inside my_website folder called images and place your image file inside images

your directory structure should like this

my_website/index.html
my_website/images/cartographerbig.png

Upvotes: 0

Related Questions