CODEWITHSUNDEEP
htmlcss
polors2
polors2

Reputation: 37

HTML/CSS body property not working

body {
background-color: #0B0B0B;
background-image:url(resources/body.jpg);
background-repeat:no-repeat;
}

That is my CSS, it won't work when I put it on a style sheet file but it will work when enclosed in a a style tag. I've checked other questions and tried its solutions but none worked for me. Is there anything wrong with that CSS? Here's the body btw:

<body>
<br>
<div id="wrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="resources/Slideshow/AvrilAlbum.png" width="583" height="583"  id="transparent">
<img src="resources/Slideshow/HTNGU.png" width="583" height="583"  id="transparent">
<img src="resources/Slideshow/LetMeGo.png" width="583" height="583"  id="transparent">
<img src="resources/Slideshow/OnTour.png" width="583" height="583"  id="transparent">
<img src="resources/Slideshow/LetMeGoBuyNow.png" width="583" height="583"  id="transparent">
<div><img src="resources/Slideshow/RockNRoll.png" width="583" height="583"  id="transparent"></div>
</div>
 <div class="controller" id="next"></div>
</div>
</div>
 <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/AvrilLavigne" data-widget-id="436842073010888705">Tweets by @AvrilLavigne</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>

Upvotes: 0

Views: 312

Answers (5)

Siddique Mahsud
Siddique Mahsud

Reputation: 1453

Just change your style, when you linking that from file css/style.css.

body {
background-color: #0B0B0B;
background-image:url(../resources/body.jpg);
background-repeat:no-repeat;
}

because here you should use relative url to location resources/body.jpg, resources folder is not in the same level as you style.css. From style.css you should move one step back by using (../) and then jumps to resources/body.jpg. Hope by correcting your css,you solve your problem.

Your complete Html page is below, here i am just include head tag and link css file.

<!DOCTYPE html>
<html>
<head>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />        
</head>
<body>
sam as your code....
</body>
</html>

Upvotes: 0

Rich
Rich

Reputation: 4170

Your CSS link should be contained in the head. 

<head>
      <link rel="stylesheet" type="text/css" href="bodyCSS.css">
</head>

This is when the CSS document is within the same folder as the html document. If your CSS document is outside of the html folders location. Then it needs to be: 

<head>
      <link rel="stylesheet" type="text/css" href="your/folder/bodyCSS.css">
</head>

And in this case. If your CSS document is in a DIFFERENT folder than your Background Image Folder, it will try to append the image link to the active folder of the html document. So it seems this is a case of misdirection on the background image location.

Upvotes: 1

httpgio
httpgio

Reputation: 127

You are probably incorrectly linking your style sheet. Perhaps pointing it to the wrong directory. Can I see your head?

Upvotes: 0

ripple_pitt
ripple_pitt

Reputation: 56

how is the folder structure setup in accordance with your .css file? Maybe try

background-image:url(../resources/body.jpg);

if the .css file is in a folder that is at the same level as your resources file

Upvotes: 0

SimplyAzuma
SimplyAzuma

Reputation: 25594

Do you have this line in between your head tags?

<head>
    <link rel="stylesheet" type="text/css" href="YOURCSSFILE.css">
</head

Also, make sure that you are using the relative link to your image.

Upvotes: 0

Related Questions