CODEWITHSUNDEEP
csstwitter-bootstrap
Christopher lee
Christopher lee

Reputation: 79

Bootstrap-Full screen background photo/image

I am building a landing page using Bootstrap 3.3.6 Cover template (http://getbootstrap.com/examples/cover/). I am attempting to add a full screen background image. I believe the problem may be I do not have a div class="cover" in my html code. My css code is below:

.cover {
  padding: 0 20px;
}

Thank you in advance.

Upvotes: 0

Views: 15935

Answers (1)

Tom Withers
Tom Withers

Reputation: 1181

Right so to create this give your body a width and height of 100%:

body {
    width: 100%;
    height: 100%;
}

Then you need to have an element to apply the background too like a header:

<header> 
    <div class="content">
    </div>
</header>

Then give your header a background-image

header {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/BG.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

You do not have to use header you could create your own class for example called .full-sceen-bg and apply that to any section

Hope this helps, Any questions just ask

Upvotes: 4

Related Questions