CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fx Crypto
Fx Crypto

Reputation: 15

How to set jumbotron to be responsive

I try to set jumbotron to be responsive on mobile device it so hard to me.

.jumbotron {
  background-image: url("../images/cover.fw.png");
  background-color: transparent;
  margin-bottom: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}
<header>

  <div class="jumbotron">

  </div>
</header>

Desktop View:

Desktop View

Phone View:

Phone View

I need help to accomplish this task.

Upvotes: 0

Views: 311

Answers (3)

Vishnu Baliga
Vishnu Baliga

Reputation: 413

Changing background-size from cover to contain will solve the problem.

.jumbotron {

  /* other properties */

  background-size: contain;
  -moz-background-size: contain;
}

Info:

contain - Resize the background image to make sure the image is fully visible.

cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

Upvotes: 0

Gurmatpal
Gurmatpal

Reputation: 134

make the background-size: contain instead of cover in the media query and change the height according to the screen in media screen and it works fine

Upvotes: 0

Akshaya K T
Akshaya K T

Reputation: 195

If you want to make the image responsive without cutting the sides, set "background-size: contain".

.jumbotron {
  background-image: url("https://i.sstatic.net/LmAwL.png");
  background-color: transparent;
  margin-bottom: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
<header>
  <div class="jumbotron"></div>
</header>

Upvotes: 1

Related Questions