CODEWITHSUNDEEP
htmlcss
Rorix
Rorix

Reputation: 49

Background not covering full page

My background image is not covering the full page when I type in my nav bar. I have set the background width and height to 100%, which I thought would solve the problem.

https://jsfiddle.net/oefu0rmk/

CSS

 #intro {
    background: #151515 url(../img/b1.jpg) no-repeat center bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: 650px;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 720px;
    display: table;
    position: relative;
    text-align: center;
}

.intro-overlay{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #111111;
    opacity: .85
}

HTML

<nav>
    <a href="#about">about me</a>
    <a href="#my parents">about my parents</a>
    <a href="#hobbies">My hobbies</a>
    </nav>

<body>


    <section id="intro"> 
        <div class="intro-overlay"></div>
            <div class="intro-content">
                <h5>Oh, hi there! My name is Tatsu</h5>
                <h1> (Tah-T-Su)</h1>
                <a class="button stroke smoothscroll" href="#about" title="about me button">find out more about me</a>
</div>

Upvotes: 0

Views: 114

Answers (3)

Victoria
Victoria

Reputation: 1

This will work perfect in you global styling sheet.

html, body {
    overflow: auto;
}

Upvotes: 0

rideron89
rideron89

Reputation: 531

Your code doesn't match your fiddle. The problem is you are not adding the background to the whole page, rather to the #intro element. There is copy outside of this <section>.

Add this to your fiddle and it will extend to the full page:

body {
  background: #151515 url(../img/b1.jpg) no-repeat center bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: 650px;
    background-attachment: fixed;
}

Upvotes: 3

Vishal Kumar
Vishal Kumar

Reputation: 37

Try this

   html { 
           background: url(xyz.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
           -moz-background-size: cover;
           -o-background-size: cover;
          background-size: cover;
        }
    body
      {
         background:none;
      }

This will definitely work.

Upvotes: 0

Related Questions