CODEWITHSUNDEEP
htmlcss
Bekki
Bekki

Reputation: 1

I can't get my background to display from CSS

My folder had extra files in which I had not deleted and was causing me conflicts. Any other newbies like me out there, take note, a clean folder is the way to go. Thank you all for your time, effort & knowledge.

It seems my folder is messy and I might have conflicts. I am not positive. But will clean up & see what happens. I will let you know how it works out. Thank you so far for the help.

I have not done any web design for a few years and I was taught to do my layout in tables (Yikes). So if this is a proper noobish question I do apologize but I really can't figure it out. I can't get any background to display, I changed the way my directory link was written several times, I added the same picture to every possible section in the folder (It is still on my computer). I then cancelled it out & tried with just a back ground colour, which also doesn't work. I have been staring at this tiny bit of code for days now & reading advice but I have run out of things to try. I guess I have done something wrong but I am to stupid to see it.

I am using editplus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Burn</title>
<link rel="stylesheet" href="shadow.css" type="text/css"/>

</head>

<body>
<div id="backing">

<!------------------------------beginning of main pages header ------------------->
<div id="header"><img src="makedo.jpg" width="980" height="200px" border="0"/>
</div>
<!------------------------------Navigation bar ------------------------->
<div id="nav">
<p class="title"><img src="images/tabard.jpg" width="60px" height="60px"/><a href="#">Burn<span class="subtitle">-Aszune EU</span></a></p>

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Apply</a></li>
</ul>
</div>

<!------------------------------------main --------------------------------->

 <div id="main">
<h1>Burn Guild</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

<!-------------------------------------side bar--------------------------------->

<div id="sidebar">
<!-- Start HTML Code --><iframe WIDTH="300" HEIGHT="400" title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=npla79" frameborder="0" scrolling="auto" ></iframe><script src="http://shoutbox.widget.me/v1.js" type="text/javascript"></script><!-- End HTML Code -->
</div>


</div>
</body>
</html>

My CSS is

#backing 
{
  background-image: url(../images/fire.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



#nav
 {
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}

.title
 {
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle 
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}

#navigation
{
list-style-type:none;
}
li 
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover 
{
color:#BDBDBD;
}

Upvotes: 0

Views: 826

Answers (4)

joker
joker

Reputation: 990

change your class #backing with below one in your css file 

#backing 
{
  background-image: url('full path of your folder where file exists/fire.jpg'); 
  background-repeat:no-repeat;
  background-position:center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

Upvotes: 1

Mthe beseti
Mthe beseti

Reputation: 619

Hi in order for this to work you have to remove background-image add use background only. Here is a demo I created for you DEMO

There are many ways to resolve this. but i prefer this one.

#backing 
{
  background: url('../images/icons.png') !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 0

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

For #backing change background-image to:

#backing {
    background: some-color some-url some-repeat-option some-position some-attachment-option;
}

and its ok, see here http://jsfiddle.net/Z7KMx/ As you can check here http://www.w3schools.com/css/css_background.asp background-image as background-repeat etc is a sub-property of background.

background-color: some-color;
background-image: some-url;
background-repeat: some-repeat-option;
background-position: some-position;
background-attachment: some-attachment-option;

Of course you can do it that way too by declaring all sub-properties step by step but its too much pain i suppose so the shorthand version is by far better.

background: some-color some-url some-repeat-option some-position some-attachment-option;

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

You need to either use background-image: with another manual properties for repeat and position or background: to add all the values in it.

In your case since you are using the background-image and all the values for it, it is not working so use only background:

#backing 
{
  background: url(../images/fire.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMO

Upvotes: 2

Related Questions