Menu
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?)
719
Bootstrap has the built-in img-responsive class for this purpose. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
Add class=carousel-caption to the HTML tag which contains your text which needs to be positioned over your image !. (And then if you wish add custom css top:xyz% to your . carousel-caption class in css stylesheet to make it align vertically at middle.)
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.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
