lara michaels lara michaels - 7 months ago 73
HTML Question

bootstrap cover template: where to place image?

This is a complete newbie question, but:

Using Bootstrap's cover template, how/where should I insert the background image to cover the page?

What I am I missing? I have tried inserting the inside the following elements in the template

<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">


the image is shown but not sized to fill the viewport's dimensions.

(Or am I misunderstanding the purpose of this template?)

Answer

Based on where the background image is applied, it looks like the background is applied to the body tag. In which case apply this CSS:

body { 
  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;
}

"cover" causes the background to fill the block element.