CODEWITHSUNDEEP
htmlcssbackground-image
user3003477
user3003477

Reputation: 1

Background image not working in CSS

What am I doing wrong here (this is my CSS) that is causing it so that when I enter in the image it is not showing up, I have checked multiple times and that is in fact the location of my image. I entered it under the /Global/ under "body".

Thanks in Advance

CSS:

/* Global */

html {   }
body { background-image:url(../'Dan Noonan Painting\ImagesBackground-image.jpeg');
            }

/* Containers */

 #wrapper               {width:900px; margin: 0px auto; background-color: white; background-color:#FFFFFF; border:thin black solid; }

 #top                   {background-color:#FFFFFF; width:100%; padding:20px 0px; overflow:hidden;   }

 #logo                  {margin:0 0 0 10px; float: left; padding: 20px 0px; }           

 #location              {float: right; padding: 20px 0px    }
 #location p            {color: #000000; margin: 0px 0px 0px 0px;   }


 #banner                {padding-top: 5px;  }

 #subbanner             {   }

  #topnav               {background-color:#CFCFCF; clear:both; border-top: thin black solid; 
                        border-bottom: thin black solid; }
 #topnav ul             {width:100%; float:left; margin:0px; background-color:#CFCFCF;  }
 #topnav ul li          {display: inline; }
 #topnav ul li a        {float:left; padding:10px 20px; }

 #topnav a:link         {color:black;   }
 #topnav a:active       {color:black;   }
 #topnav a:focus        {color:black;   }
 #topnav a:visited      {color:black;   }
 #topnav a:hover        {color:black; background-color:#666666; }


 #content-wrapper       { background-image:url('../Images/Background-image.jpeg');  }


 #leftnav               {   }

 #leftside              {   }

 #rightside             {float:right; width:240px; background-  color:#cccccc;  }
 #rightside img         {padding-top: 30px; padding-bottom: 20px;   }
 #rightside p           {font-size: 16px}

 #content               {float:left; width: 650px; background-color:#999999 }
 #content img           {padding-top: 30px; padding-bottom: 20px;   }

 #footer                {overflow:hidden; float:right; width:100%;  }

Upvotes: 0

Views: 128

Answers (4)

user3132007
user3132007

Reputation: 1

You can use

background:url('../Dan Noonan Painting/ImagesBackground-image.jpg');

instead of background-image

Upvotes: 0

kelly johnson
kelly johnson

Reputation: 1636

jpeg is valid if in fact that's how you saved the image. What doesn't work is the mixing of forward and backward slashes. Most always, the default is /lorem/form etc, not /lorme\form for example, as Nathan pointed out.

Upvotes: 0

Jayanth Ramachandran
Jayanth Ramachandran

Reputation: 8716

background-image:url('../Dan Noonan Painting\ImagesBackground-image.jpeg');

Upvotes: 0

Nitesh
Nitesh

Reputation: 15739

The placement of the braces is not correct. You need to declare it within the url as url(' /* your link */ '). Also, your path declaration too seems incorrect + the jpeg does not have a .jpeg extension. It has only .jpg.

What you have above is not correct.

background-image:url(../'Dan Noonan Painting\ImagesBackground-image.jpeg');

Change it to the below.

For Instance,

background-image:url('../Dan Noonan Painting/ImagesBackground-image.jpg');

Hope this helps.

Upvotes: 1

Related Questions