CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Harkirat Saluja
Harkirat Saluja

Reputation: 8114

Changing height of background image according to screen size using bootstrap/css

I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="bg"></div>
        </div>
        <div class="col-md-4">
            hi how are you
        </div>
    </div>
</div>

Following is the css for class bg :

.bg {
    background-image: url('../images/2.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:690px;
}

Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.

Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?

Upvotes: 3

Views: 5255

Answers (3)

Geekwen
Geekwen

Reputation: 26

if you want text over picture, you can do this: 

@media (max-width: 480px) {
  .bg {
    position: absolute;
    left: 0;
    width: 100%;
  }
}

if you want half top is picture, half bottom is text, you can do this:

html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="wrap">
        <div class="bg"></div>
      </div>
    </div>
    <div class="col-md-4">
      hi how are you
    </div>
  </div>
</div>

css

@media (max-width: 480px) {
  .wrap {
    position: relative;
    padding-bottom: 50%;
  }

  .bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

hope it can help

Upvotes: 0

caldera.sac
caldera.sac

Reputation: 5088

do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.

<div class="img-responsive" style="width: 300px;height: 300px;">
    <img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
 </div>

Upvotes: 2

peszo
peszo

Reputation: 429

Try using viewport-height in CSS3:

.bg {
    height:100vh;
}

Upvotes: 4

Related Questions