Making html div take up full screen height

Question

I am building a website based on a template. It uses bootstrap and can be seen here http://www.tombelina.com/fcrusade/

I am trying to get the first image to take up the whole screen on a mobile device screen. Currently it works perfectly for desktops but I can not get it to work with mobile devices.

it is currently taking up the whole screen on a mobile. Do you mean that the image should not be cropped? — viCky, Jun 27 '17 at 04:26
you can try header { background-position: contain; background-repeat: no-repeat;} — viCky, Jun 27 '17 at 04:33
I think it's because your gametracker image is so wide that it's jacking up the layout. It's wider than 100% of the page. Add the "img-responsive" class to that image. — aquinas, Jun 27 '17 at 04:34
@Aquinas can you add your comment as an answer. You were right it was the gametracker causing the error — Tom Hanson, Jun 27 '17 at 04:50

InvincibleM · Answer 1 · 2017-06-27T04:38:56.423

Use the @media in CSS. Here is an example:

 @media screen and (max-device-width: 480px) {
   img.classname {
     float: left;
     width: 200px;
   }
 }

just change classname to any class and give it to the image.

--OR--

you can use this:

body {
    background: url('http://www.flywavez.com/images/sexy-girl-listening.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

ref: CSS to make images resize and fit any screen the same

score 0 · Answer 2 · answered Jun 27 '17 at 04:38

I guess in your site, you should add some color to the background (Black would be suited i believe). And as for the image you should try this css code:

    [Image]{
height: 100vh; //which means the image will have the height of the screen. NOTE: Of the SCREEN and not the WEBPAGE.
}

You can do this and get the size of the image as of the screen.

score 0 · Answer 3 · answered Jun 27 '17 at 09:34

0

You have to use @media

`@media (max-width: 767px){
   header .header-content{
      height: 550px;
   }
 }`

Your site will look like this

answered Jun 27 '17 at 09:34

George

195
1
5

score 0 · Accepted Answer · answered Nov 13 '17 at 22:49

0

I think it's because your gametracker image is so wide that it's jacking up the layout. It's wider than 100% of the page. Add the "img-responsive" class to that image - @aquinas

answered Nov 13 '17 at 22:49

Tom Hanson

873
10
39

Making html div take up full screen height

4 Answers4