Body background img will apply in HTML head but not in my CSS

Question

I am having trouble will my first webpage assignment, I'm only in my first year with no previous experience. My issue is that when i try to apply a background img to the body it will apply with a simple style set in the head, but it fails when I apply the same code in my css and I'm at a loss as to why it is failing. I do have

Please may some one try to explain in a simplistic way, why it is not working in my css . Thank you

<!DOCTYPE html>
<!-- 
edwin martin
05/10/2015
V1 
-->
<html lang="en">
<head>
        <title>Index</title>
      <!-- ensures the document is using the correct char set --> 
      <meta charset="utf-8">
      <meta name="description" content="Edwins index">  


      <link rel="stylesheet" href="styles/indexstyles.css">

    <!-- 
           The below section looks like a comment, but it's a conditional include statement.
           It's ignored by all browsers except IE9.  html5shiv is a library that fixes some HTML5 
           IE bugs. 
    -->

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

<style type="text/css">
 body
 {background-image: url("images/html.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  padding-right:10px;
  background-size:cover;}
</style>

</head>


<body>


      <div id="page">

              <div id="nav">
              <nav>
                    <h3> Nav</h3>
                                   <ul>
                                   <li><a href="learning_log.html">laearning_log</a></li>
                                   <li><a href="session2/timetable2.html">Contact</a></li>
                                   </ul>
              </nav>
              </div>


              <div id="wrapper">

                      <div id="head">
                        <header id="headcolor">
                             <div id="toplinks">
                                 <ul>
                                    <li id="tl"> <input type="button" name="b1" value="learning log" onclick="location.href='learning_log.html'"> </li>

                                    <li id="tl"> <input type="button" name="b1" value="contact" onclick="location.href='contact.html'"> </li>
                                 </ul>
                             </div> <br>
                             <br>
                            </header> 
                       <h1 id="title"> Index </h1>
                      </div>                          

                     <div id="abme">    
                          <h2>About me </h2>
                          <div id="content">    
                              <img class="mesz" src="images/me.jpg" alt="me">

                          <p>My name is Edwin Martin and I am 25 years old, I live in fareham based in portsmouth. I currently am a student at solent University studying Computing.
                             I currently have a part time job in my family business maintaining student properties. My work ranges from tiling, Plumbing, Brick laying, Electrics,and many more.
                             Though it is not my only practice I also enjoy mechanics, mainly on Volvo engines and Kawasaki's and Husqvarna's.
                             My hobbies are vehicle maintainance, Motorcycling, and Computers building and gaming. </p>
                             </div>
                     </div>


                     <div id="abssu"> 
                          <h2>About Southampton Solent University </h2>
                            <div id="content">
                          <p>Southampton Solent University became a university in July of 2005. Incorporated as an independent higher education institution in 1989,
                             the University's origins can be traced back to a private School of Art founded in 1856.
                             Southampton Solent University became a university in July 2005 thou mergers between Southampton College of Art,
                             and the College of Technology and the College of Nautical Studies at Warsash,laid the foundations for what is now Southampton Solent University.
                            </div>

                                    <img class="solpic" src="images/solent_logo.jpeg" alt="solent logo">

                     </div> 

                     <div id="abit">    
                          <h2>About Internet Technology </h2>

                          <div id="content">
                          <p>Internet Technology focus on the main aspect's of website development, Starting with basic webpage development such as displaying text and pictures, to more
                             advanced css giving the page detail. an example would be as simple as text color to defining pixel sizes. Other aspects of internet technology are javascript
                             and css3. These can give the page a dynamic feel like 3d pictures and animations. As a group these code languages build up the basic aspects of any webpage,
                             from amateur to a advance corporate webpage.It probably is the most useful subject of the 21st century</p>
                         </div> 

                      <footer id="foot">
                        <p id="foottext"> edwin martin's index.     v3.6.10/11/2015 </p>    
                      </footer>

                     </div>  




              </div>
      </div>

  </body>

</html>


/** css **/

block {margin: 0 auto;}

ul { list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;}

a {  display: block;
width: 120px;}

body  { text-transform: capitalize;
  font-family: arial, helvetica, sans-serif;
  background-image: url("images/html.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;}


header { text-align:left;
    background-color:black;
    }

footer { text-align:center;
   background-color:black;}

table, td, th { outline-style: solid;
         outline-color: darkblue;
         table-layout: auto;
         }

td {  padding: 15px;
padding-bottom:60px;}      

h1 {  font-size:40px;
 text-align: center;
 font-family:Courier New, Courier, monospace;}

h2 {text-decoration: underline;
text-align: center; }

h3 {text-align:center;
background-color:lightblue;
margin:0 0;}

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */ 
nav li {padding-bottom:10px;} 

/** ID,s **/  


#wt {width:200px;}

#table {height:auto;
    display:block;
    margin: 0 auto;}

#headcolor{background:darkblue;}


#tl  { float:left;
  padding-right:5px;
  background-color:darkblue;}

#wrapper{ width:84%;
      height:auto;
      background-color:white;
      float:left;
      position:relative;
      border-style: solid;
      border-width: 10px;
      border-color:darkblue;
      border-radius: 25px;
      box-shadow:1px 1px 2px black, 0 0 25px red, 0 0 10px darkred;
      } 

#abme {  height:300px;
    border-style: solid;
    border-width: 5px;
    border-color:darkblue;
    position:relative;} 

#abssu { height:400px;
     border-style: solid;
     border-width: 5px;
     border-color:darkblue;
     position:relative;}

#abit { height:300px;
   border-style: solid;
   border-width: 5px;
   border-color:darkblue;
   position:relative;} 

#nav {  width:10%;
    background-color:white;
    float:left;
    margin-right:5px;
    border-style: inset;
    border-width: 6px;
    border-color:darkblue;
    border-radius: 10px;
    box-shadow:1px 1px 2px black, 0 0 25px red, 0 0 5px darkred;
    padding:5px;}




#page  { width:1640px;
    margin: 0 auto;

    }

#head{height:80px;
  border-style: solid;
  border-width: 5px;
  border-color:darkblue;

}
#foot2{ 


    border-style: solid;
    border-width: 5px;
    border-color:darkblue;
    }

#foot{  background:darkblue;
width:100%;
padding-top:10px;
position:absolute;
bottom:0;
left:0;

}

#toplinks {

       list-style-type: none;
       text-align:center;
       float:right;
       }

#title {margin: 0 auto;
   text-shadow:3px 3px #AAA;}

#content {padding:10px;}

#foottext{color:white;
      background:darkblue;
      width:100%;

      margin:0 auto;}

 /** Classes **/

.solpic {display: block;
    margin-left: auto;
    margin-right: auto;}        

.mesz { width: 100px;
   height: 100px;
   display:block;
   float:left; 
   padding-right:8px;}

Make sure the the URL to your image is correct in the CSS file. If your CSS file is in one directory up then you may need to write this `"../images/html.jpg"` Check: http://stackoverflow.com/questions/4810927/how-to-go-up-a-level-in-the-src-path-of-a-url-in-html — Deepak Kamat, Nov 11 '15 at 18:02
it does i have many styles in my css 171 lines they all apply , just not the img for the body. the pic is named "html" . maybe there is some conflicting css ? tho the same img loads in the style on the head in the html. can i post the complete css ? and one of webpages html . the css is in a folder in the same root as the imgs folder and the html's . i used the same css code to pull in a few pictures and they are fine. — edwin, Nov 11 '15 at 18:03
I have posted the HTML for my webpage and the external styles in my CSS, note that i remove the i just had it there to test it works *** perhaps some one could load my code and just change the pics for link that would work for them and then they can see my problem. Ty — edwin, Nov 11 '15 at 18:22
read my answer. does it ring any bells? if css loads, that is probably the cause — Elentriel, Nov 11 '15 at 18:26
I think so ok i think i under stand, !!! my html page is in the root of the folder in the same folder in my style folder with indexstyles.css inside that, my pictures are in a folder called images again in the same root as all the rest. so when the html calls and img i just use images/html.jpg, but the html is not in a folder which the css is. so it needs to come out a folder in into another then select the img. what would that like look like ? — edwin, Nov 11 '15 at 18:40

score 1 · Answer 1 · edited Jan 23 '16 at 17:24

1

It took me a few try's to understand what you meant, yes it was all due to the fact the HTML page was in the root but the CSS was in a folder so i changed it from

url("images/html.jpg");

to

background-image: url("../images/html.jpg"); .

edited Jan 23 '16 at 17:24

Venkat.R

7,420
5
42
63

answered Nov 11 '15 at 18:43

edwin

181
2
10

score 0 · Accepted Answer · answered Nov 11 '15 at 18:19

0

Check wheather you have included the css file correctly. Or else if the css file is included correctly and if it is in a folder like 'css' or 'assets' change your css code from background-image: url("images/html.jpg"); to background-image: url("../images/html.jpg");

hope this helps

answered Nov 11 '15 at 18:19

Ninoop p george

678
5
22

My html has no styles in it. EXCEPT that code was when i can apply it in the html head. all my styles are in a css format which is linked at the top. and it is loading them all even the body stuff like text-transform capitalize and the font family. it will probably be best if i take a video or pictures to show you. – edwin Nov 11 '15 at 18:32

score 0 · Answer 3 · answered Nov 11 '15 at 18:20

A highly propable answer to that is your directory. an image is being loaded from your styles directory/images/html.jpg on one ocasion and from your php file(asuming its php here, but you get the drift)/images/html.jpg. Try to go up the folders using ../

url("../../images/html.jpg");

as many times as needed, and add any extra folders that are required to find the actuall image file

In chrome if you right click anywhere on your page and do inspect element, you will see from what path you try to load a file (in the error log)

score 0 · Answer 4 · answered Nov 11 '15 at 20:30

0

Change the extension of the image to PNG. I know this sounds weird but I also faced a similar problem and it worked for me

answered Nov 11 '15 at 20:30

Jay Ghosh

1

Body background img will apply in HTML head but not in my CSS

4 Answers4