Quantcast

Jumbotron with background image

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Jumbotron with background image

Farshad Momtaz
I'm using a jumbotron to show a header on top of my page. I want to assign a background to it and some text to be shown on top of it. If I use the following code 
css:
.jumbotron {
background-image:url('../img/header.jpg');
background-size: cover;
background-repeat:no-repeat;
}
HTML:
<div class="jumbotron hidden-phone">
<div class="container" style="margin-top: 40px;">
<div class="row-fluid">
<div class="span12">
<h1>TEST</h1>
</div>
</div>
</div>
</div> 

the image and the text will be shown but it will not show the full height of the image. Is there any way that I can show the full height of the image without setting it using "height:500px"?

moreover can I add some padding or margin to the top of the container so it is shown in middle of the image (background of jumbotron)?

Thank you 

--
You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 
Loading...