CODEWITHSUNDEEP
htmlcss
user7542605
user7542605

Reputation:

Why won't my background image show at all?

I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.

HTML: 

<!DOCTYPE html>
<html>
<head>
    <link href="styles.css" text="type/css" rel="stylesheet">
    <title>Test</title>
</head>
<body>
    This is a test.
</body>
</html>

CSS:

body {
background-image: url(image.jpg) no-repeat;
}

Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?

Upvotes: 0

Views: 61

Answers (4)

mostafa hadian
mostafa hadian

Reputation: 3

your image url is important to give it: I hope solved with this.

1- in own folder: "./image.jpg"

2- in out folder: "../image.jpg"

3- or root relative path(eg asp.net): "~/pictures/image.jpg"

4- or relative path: "../pictures/image.jpg"

body
{
   background-image: url(./image.jpg);
   background-repeat: no-repeat;
}

Upvotes: 0

lut
lut

Reputation: 150

According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.

The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.

So here is the code you should use case you actually do not want to see image repeating:

body {
   background-image: url("image.jpg");
   background-repeat: no-repeat;
}

Upvotes: 1

Majid Mushtaq
Majid Mushtaq

Reputation: 319

Use background background instead of background-image if you are using no-repeat etc. 

body {
   background: url(image.jpg) no-repeat;
}

Upvotes: 3

surfthecity
surfthecity

Reputation: 160

You can't combine background-repeat in background-image.

body {
   background-image: url("image.jpg");
   background-repeat: no-repeat;
}

Upvotes: 3

Related Questions