CODEWITHSUNDEEP
htmlcss
Rohit Jaiswal
Rohit Jaiswal

Reputation: 116

Background image not spreading throughout the body

I am making the website and attaching the current situationenter image description here as in screenshot

as you can see that the background images is not spreading throughout the body. Anyone can figure it out

Here is my index.html

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->

<div class="wrap">
  <header>
    <div class="container">
    <h1><a href="#">Schooling india</a></h1>

      <nav>
        <ul>
          <li class="current"><a href="index.html" class="m1">Home Page</a></li>

          <li>
          <div class="dropdown"><a href="about-us.html" class="m2 dropbtn">About Us</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>

          <li>
          <div class="dropdown"><a href="about-us.html" class="m3 dropbtn">Admissions</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>

          <li>
          <div class="dropdown"><a href="about-us.html" class="m4 dropbtn">Rules</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>
          <li>
          <div class="dropdown"><a href="about-us.html" class="m5 dropbtn">Info Corner</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>


          <li>
          <div class="dropdown"><a href="about-us.html" class="m6 dropbtn">Achievements</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>



          <li>
          <div class="dropdown"><a href="about-us.html" class="m7 dropbtn">Gallery</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>



          <li>
          <div class="dropdown"><a href="about-us.html" class="m8 dropbtn">Contact</a>
          <div class="dropdown-content">
                <a href="#">Link 1</a>
                 <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
          </div>
          </div></li>


        </ul>
      </nav>
      <form action="#" id="search-form">
        <fieldset>
          <div class="rowElem">
            <!-- <input type="text" placeholder="Search">
            <a href="#">Search</a></div> -->

            <script type="text/javascript">
                    var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

                    function GetClock(){
                    var d=new Date();
                    var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();

                    var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

                    if(nhour==0){ap=" AM";nhour=12;}
                    else if(nhour<12){ap=" AM";}
                    else if(nhour==12){ap=" PM";}
                    else if(nhour>12){ap=" PM";nhour-=12;}

                    if(nmin<=9) nmin="0"+nmin;
                    if(nsec<=9) nsec="0"+nsec;

                    document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+"  "+nhour+":"+nmin+":"+nsec+ap+"";
                    }

                    window.onload=function(){
                    GetClock();
                    setInterval(GetClock,1000);
                    }
              </script>
          <div id="clockbox"></div>

           <!--  <script > var date=new Date();
            document.write(date);</script> -->
        </fieldset>
      </form>
    </div>
  </header>
  <div class="container">
    <aside>
      <h3>Categories</h3>
      <ul class="categories">
        <li><span><a href="#">Programs</a></span></li>
        <li><span><a href="#">Student Info</a></span></li>
        <li><span><a href="#">Teachers</a></span></li>
        <li><span><a href="#">Admissions</a></span></li>
        <li><span><a href="#">Administration</a></span></li>
        <li><span><a href="#">Basic Information</a></span></li>
        <li><span><a href="#">Vacancies</a></span></li>
        <li class="last"><span><a href="#">Academic Calendar</a></span></li>
      </ul>
      <form action="#" id="newsletter-form">
        <fieldset>
          <div class="rowElem">
            <h2>School lettter</h2>
            <input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
            <div class="clear"><a href="#" class="fleft">Unsubscribe</a><a href="#" class="fright">Submit</a></div>
          </div>
        </fieldset>
      </form>
      <h2>Academic <span>Calender</span></h2>
      <ul class="news">
        <li><strong>June 30, 2017</strong>
          <h4><a href="#">1<sup>st</sup> parents-teacher meeting</a></h4>
          parents are requested to be present by 11:00 am sharp </li>
        <li><strong>June 14, 2017</strong>
          <h4><a href="#">Start of new term</a></h4>
         Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
        <li><strong>May 29, 2017</strong>
          <h4><a href="#">Result declaration</a></h4>
          Report card distribution will start at 9:00pm</li>
        <li>
          <h4><a href="#">See more...</a></h4></li>
      </ul>
    </aside>
    <section id="content">
      <div id="banner">
        <h2>Educating <span>India <span>Since 1992</span></span></h2>
      </div>
      <div class="inside">
        <h2>Recent <span>News</span></h2>
        <ul class="list">
          <li><span><img src="images/icon1.png"></span>
            <h4>About Us</h4>
            <p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
          </li>
          <li><span><img src="images/icon2.png"></span>
            <h4>Our Branches</h4>
            <p>We have branches in following areas<br><ul style="color: #008cc4">
            <li><strong>Branch 1</strong></li>
            <li><strong>Branch 2</strong></li>
            <li><strong>Branch 3</strong></li>
            <li><strong>Branch 4</strong></li></ul></p>
          </li>
          <li class="last"><span><img src="images/icon3.png"></span>
            <h4>Student’s Life</h4>
            <p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
          </li>
        </ul>
        <h2>Move Forward <span>With Your Education</span></h2>
        <p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
        <div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
        <p class="p0"></p>
      </div>
    </section>
  </div>
</div>
<footer>
  <div class="footerlink">
    <p class="lf">Copyright &copy; 2017 <a href="#">SiteName</a> - All Rights Reserved</p>
    <p class="rf">Design by <a href="#">Rohit Jaiswal</a></p>
    <div style="clear:both;"></div>
  </div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>

Following is the style sheet

   article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
    display:block;

}
mark, rp, rt, ruby, summary, time {
    display:inline;
}
body {
    background:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
    line-height:1em;
    color:#454545;
    background-image:url(../images/tail-middle.jpg) repeat-y ;
    /*background-image: no-repeat;*/
}


.dropdown {
    float: left;
    overflow: visible;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;

    padding: 14px 16px;
    background-color: inherit;
}

.dropdown:hover .dropbtn {
    background-color: #white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #grey;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}



html {
    min-width:940px;
}
html, body {
    height:100%;
}
.container {
    margin:0 auto;
    width:940px;
    overflow:visible;
    font-size:.875em;
    padding-bottom:176px;
}
header {
    background:url(../images/header-bg.jpg) no-repeat center top;
    min-width:940px;
}
header .container {
    height:194px;
    position:relative;
    padding:0;
}
section#content {
    float:left;
    width:691px;
}
aside {
    width:219px;
    float:left;
    margin-right:30px;
    padding:5px 0 0 0;
}
.fleft {
    float:left;
}
.fright {
    float:right;
}
.clear {
    clear:both;
}
.col-1, .col-2, .col-3 {
    float:left;
}
.alignright {
    text-align:right;
}
.aligncenter {
    text-align:center;
}
.wrapper {
    width:100%;
    overflow:hidden;
}
.wrap {
    height:auto !important;
    height:100%;
    min-height:100%;
    background:url(../images/tail-middle.jpg) repeat-y center 194px;
    min-width:940px;
}
input, select, textarea {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    vertical-align:middle;
    font-weight:normal;
}
fieldset {
    border:0;
}
.categories {
    padding-bottom:37px;
}
.categories li {
    font-weight:bold;
    font-size:.857em;
    padding-bottom:8px;
    margin-bottom:6px;
    background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
    background:none;
    padding:0;
    margin:0;
}
.categories li span {
    display:block;
    padding-left:15px;
    height:1%;
    background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
    text-decoration:none;
    color:#008cc4;
}
.categories li a:hover {
    color:#ff7b01;
}
.news {
    margin-top:-25px;
}
.news li {
    padding-top:25px;
    line-height:1.429em;
}
.news li strong {
    font-size:.857em;
    color:#454545;
    display:block;
    padding-bottom:3px;
}
.news li a {
    color:#008cc4;
    text-decoration:none;
    font-weight:bold;
}
.articles {
    margin-top:-18px;
}
.articles li {
    width:100%;
    overflow:hidden;
    vertical-align:top;
    line-height:1.429em;
    padding-top:18px;
}
.articles li img {
    float:left;
    margin-right:22px;
}
.sitemap {
    padding-bottom:15px;
}
.sitemap li {
    padding:0 0 5px 16px;
    background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
    padding-top:5px;
    margin-bottom:-5px;
}
.list {
    width:100%;
    overflow:hidden;
    padding-bottom:40px;
}
.list li {
    float:left;
    width:175px;
    margin-right:53px;
}
.list li.last {
    margin:0;
}
.list li span {
    display:block;
    text-align:center;
}
.list li h4 {
    padding-top:20px;
}
.list li p {
    margin:0;
}
.img-box {
    width:100%;
    overflow:hidden;
    padding-bottom:20px;
    line-height:1.429em;
}
.img-box img {
    float:left;
    margin:0 20px 0 0;
}
.extra-wrap {
    overflow:hidden;
}
p {
    margin-bottom:16px;
    line-height:1.429em;
}
.p0 {
    margin:0;
}
.address {
    width:100%;
    overflow:hidden;
    padding-bottom:40px;
}
.address address {
    font-style:normal;
    line-height:1.429em;
    float:left;
    width:248px;
}
.address address strong {
    color:#008cc4;
    width:94px !important;
    width:91px;
    float:left;
}
.address .extra-wrap {
    float:left;
    width:385px;
}
.address p {
    margin:0;
}
#banner {
    width:691px;
    height:299px;
    background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
    color:#fff;
    font-size:42px;
    text-transform:none;
    line-height:1.2em;
    padding:75px 0 0 55px;
    margin:0;
}
#banner h2 span {
    display:block;
    margin-top:-12px;
    color:#fff;
}
#banner h2 span span {
    font-size:30px;
    margin-top:-8px;
}
a {
    color:#ff7b01;
    outline:none;
}
a:hover {
    text-decoration:none;
}
h1 {
    text-indent:-9999px;
}
h1 a {
    width:473px;
    height:63px;
    position:absolute;
    left:0;
    top:4px;
    background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
    font-size:24px;
    line-height:1.2em;
    text-transform:uppercase;
    margin-bottom:20px;
}
h2 span {
    color:#8d8d8d;
}
h3 {
    font-size:20px;
    line-height:1.2em;
    text-transform:uppercase;
    margin-bottom:15px;
}
h4 {
    font-size:1em;
    color:#008cc4;
    margin-bottom:5px;
}
h4 a {
    color:#008cc4;
    text-decoration:none;
}
h4 a:hover {
    color:#ff7b01;
}
.txt1 {
    color:#008cc4;
    font-weight:bold;
}
.link {
    position:absolute;
    right:0;
    top:159px;
}
header .nav-bg {
    background:no-repeat center top;
}
header nav {
    position:absolute;
    left:0;
    top:100px;
}
header nav ul li {
    float:left;
    font-size:16px;
    line-height:1.2em;
    text-transform:uppercase;
    padding-right:1px;
    background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
    background:none;
    padding:0;
}
header nav ul li a {
    color:#454545;
    text-decoration:none;
    display:block;
    float:left;
    text-align:center;
    padding:18px 0 20px 0;
    background-repeat:no-repeat;
    background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
    color:#008cc4;
}
header nav ul li a.m1 {
    width:95px;
}
header nav ul li.current a.m1 {
    background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
    width:80px;
}
header nav ul li.current a.m2 {
    background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
    width:85px;
}
header nav ul li.current a.m3 {
    background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
    width:60px;
}
header nav ul li.current a.m4 {
    background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
    background:none;
    padding:0;
}
header nav ul li a.m5 {
    width:100px;
}
header nav ul li.current a.m5 {
    background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
    width:100px;
}
header nav ul li.current a.m6 {
    background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
    width:75px;
}
header nav ul li.current a.m7 {
    background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
    width:85px;
}
header nav ul li.current a.m8 {
    background-image:url(../images/m5-act.jpg);
}
#content .inside {
    padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
    border:0;
    float:right;
    background:#000;
    color:#ff7b01;
    width:100%;
    line-height:10px;
    font-size:10px;
    margin:-50% 0 0 0;
    padding:0;
}
#search-form .rowElem {
    height:28px;
    position:absolute;
    right:0;
    top:30px;
}
#search-form input {
    width:205px;
    background:#fff;
    padding:4px 5px 4px 5px;
    border:1px solid #d0d0d0;
    border-right:0;
    color:#454545;
    line-height:1.2em;
    float:left;
    height:18px;
}
#search-form a {
    text-transform:uppercase;
    color:#fff;
    text-decoration:none;
    float:left;
    background-color:#0087c1;
    padding:6px 11px 0 11px;
    height:22px;
}
#search-form a:hover {
    background-color:#47b6e5;
}
#newsletter-form {
    padding-bottom:45px;
}
#newsletter-form fieldset {
    background:url(../images/newsletter-bg.gif) no-repeat left top;
    width:219px;
    height:131px;
    overflow:hidden;
}
#newsletter-form .rowElem {
    padding:13px 19px 0 17px;
}
#newsletter-form input {
    border:1px solid #0086b5;
    background:#fff;
    color:#8e8e8e;
    font-size:.857em;
    padding:2px 5px 2px 5px;
    width:171px;
    margin-bottom:13px;
}
#newsletter-form h2 {
    color:#fff;
    margin-bottom:13px;
}
#newsletter-form a.fleft {
    color:#fff;
    position:relative;
    top:3px;
}
#newsletter-form a.fright {
    display:block;
    color:#fff;
    border:1px solid #26b6e8;
    text-decoration:none;
    background-color:#006caa;
    padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {

    background-color:#47b6e5;
}
#contacts-form {
    clear:right;
    width:100%;
    overflow:hidden;
}
#contacts-form fieldset {
    border:none;
    float:left;
}
#contacts-form .field {
    clear:both;
    height:30px;
}
#contacts-form .field.extra {
    height:268px;
}
#contacts-form label {
    float:left;
    width:123px;
    font-weight:bold;
    color:#008cc4;
}
#contacts-form input {
    width:277px;
    padding:2px 0 2px 3px;
    border:1px solid #d1d1d1;
    color:#70635b;
}
#contacts-form textarea {
    width:503px;
    height:252px;
    padding:2px 0 2px 3px;
    border:1px solid #d1d1d1;
    color:#70635b;
    overflow:auto;
}
footer {
    background:url(../images/footer-bg.png) no-repeat center top;
    margin-top:-120px;
    min-width:940px;
}
footer .footerlink {
    margin:0 auto;
    width:940px;
    height:60px;
    padding-top:60px;
    color:#454545;
    font-size:.785em;
    line-height:1.429em;
}
.footerlink p {
    margin:0;
    padding:0;
    line-height:normal;
    white-space:nowrap;
    text-indent:inherit;
    color:#454545;
}
.footerlink a {
    color:#454545;
    font-weight:normal;
    margin:0;
    padding:0;
    border:none;
    text-decoration:underline;
    background-color:transparent;
}
.footerlink a:hover {
    color:#454545;
    background-color:transparent;
    text-decoration:none;
}
.footerlink .lf {
    float:left;
}
.footerlink .rf {
    float:right;
}
a {
    outline:none;
}

Upvotes: 0

Views: 54

Answers (1)

sjsam
sjsam

Reputation: 21965

Use 

background-size:cover;

to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in 

footer {
    background:url(../images/footer-bg.png) no-repeat center top;
    /*You need to remove the above line*/
    margin-top:-120px;
    min-width:940px;
}

Edit2

After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you? Change 

.wrap {
    height:auto !important;
    height:100%;
    min-height:100%; 
    background:url(../images/tail-middle.jpg) repeat-y center 194px;
    //The above directive will override the body bg, so just remove it
    min-width:940px;
}

to

.wrap {
    min-width:940px; // Only this seems a sensible declaration.
}

Upvotes: 1

Related Questions