CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user3520443
user3520443

Reputation: 279

Bootstrap 3 theme effects

This isn't really me asking how to do this but a pointer really in regards to producing the effect an example Bootstrap theme I have seen and for other websites too not just bootstrap.

Bootstrap 3 Theme

The introduction of the site fills the browser window every which way on all screen sizes and I have always had trouble achieving this. What are the best ways to approach this and why?

Upvotes: 2

Views: 117

Answers (1)

SW4
SW4

Reputation: 71150

Simple enough; you need to set the height of the div (or other element you use to hold the full screen content) to '100%', but this needs to be relative to 'something' which is why you also set height:100% for the html (viewport) and body (content) elements. As long as the div with the image appears first in your HTML, it will work as anticipated.

Demo Fiddle

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}
#imgDiv{
  position:relative;
  height:100%;
  background-image:url(myImage.png);
}

Upvotes: 1

Related Questions