CODEWITHSUNDEEP
csstwitter-bootstrap
Andy
Andy

Reputation: 541

Bootstrap Full Page Background

I have been fighting with a full page background image in Bootstrap. Currently the background image covers 90% of the page but I cannot get the last 10% of the page. It behaves like there is a bottom margin somewhere, but there isn't.

HTML:

<body>

  <div class="jumbotron">
    <div class="row">
        <div class="col-sm-12">
          <div class="text-center">
            <h1 style="font-weight: 400;" class="headline"><br></h1>
            <h2 style="font-weight: 400;" class="tagline"></h2>
          </div>
        </div>
      </div> 

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/139447981" id="video"></iframe>
            </div>
          </div>

        <div class="col-sm-6">
          <div class="text-center">
            <h3><%= t('.call_to_action_headline') %></h3><br> 
            <h4 class="counter">123</h4>
            <p><%= t('.endline') %></p>

            <div class="subscribe text-muted text-center">
              <%= form_for @user do |f| %>
                <div class="row">
                  <div class="col-xs-12">
                    <div class="input-group">
                      <%= f.text_field :email, class: 'form-control form-control-lg',
                      placeholder: 'Your email' %>
                      <span class="input-group-btn">
                      <%= f.submit t('.submit_button'), class: 'btn btn-primary btn-lg' %>
                      </span>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</body>

CSS:

@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

@import "bootstrap";
@import "font-awesome";

body {
  background-color: #ffffff;
}

.headline {
  margin-top: 80px;
  color: white;
}

h3 {
  color: white;
}

#video {
  margin-bottom: 300px;
}

p {
  color: white;
}

.counter {
  font-size: 5rem;
  color: white;
}

.tagline {
  margin-top: 20px;
  margin-bottom: 100px;
  color: white;
}


.jumbotron {
  background: image-url('home-bg-1.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  height: 100%;
  background-color: #ffffff;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);

  .jumbotron-text {
    min-height: 25rem;
    padding-top: 8rem;
    padding-bottom: 6rem;

    .container {
      max-width: 50rem;
    }
  }
}

I'd like to have a full screen background image. Here is how it looks: https://i.sstatic.net/L6VXE.jpg

Thanks

Upvotes: 0

Views: 14634

Answers (2)

Phureewat A
Phureewat A

Reputation: 429

There is another trick to make a background image on a website cover the entire browser window at all times using only CSS.

Works in Chrome, Firefox 3.6+, Opera 10+ and IE9+.

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

Example

Others full page background trick here.

Upvotes: 2

David Wilkinson
David Wilkinson

Reputation: 5118

By default, most browsers add in a certain amount of margin which could be causing you the problem.

Take this first fiddle for example: https://jsfiddle.net/n874j2yy/, if you inspect the content area with Chrome tools or your browsers inspector, you'll notice there's 8px of margin added to the <body> tag, meaning the .test div isn't spanning quite the entire width of the viewport.

Whereas in this example, I've used the viewport-height / viewport-width values: height: 100vh / width: 100vw. https://jsfiddle.net/7u2yod66/1/. I've also overriden the browser default <body> margin by adding margin: 0

Instead of using height: 100% on .jumobtron, try using height: 100vh and also removing margin manually from the <body> tag (margin: 0)

Upvotes: 2

Related Questions