How to set jumbotron to be responsive

Question

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.

https://stackoverflow.com/questions/12609110/responsive-css-background-images — chintuyadavsara, Oct 26 '18 at 10:42
could you please add image path so it will be visible on preview — Varsha Dhadge, Oct 26 '18 at 10:50

score 1 · Answer 1 · answered Oct 26 '18 at 10:59

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

.jumbotron {
  background-image: url("https://i.stack.imgur.com/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>

Gurmatpal · Answer 2 · 2018-10-26T11:03:40.920

0

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

edited Oct 26 '18 at 11:03

answered Oct 26 '18 at 10:58

Gurmatpal

134
8

score 0 · Accepted Answer · answered Oct 26 '18 at 11:26

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

How to set jumbotron to be responsive

3 Answers3