5

I would like to set a div to full screen in angular2 template

I have tried this Im my html template

<div class="auth-container">

</div>

In trhe css

.auth-container{
  height: 100%; //also tried with min-height
  background-image: url("assets/images/backgroundimage.jpg");
 -webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

THe image stretches to full screen but its cut off by the page height as shown in the screen shot below

Setting the height manually like

height:550px;

Stretches to full screen but its not responsive in different screen sizes

What do i need to set to extend the height to maximum

2
  • Is this question is related to angular?
    – Sreemat
    Aug 3, 2017 at 5:27
  • This is related to HTML and CSS not angular you are just using angular template
    – Sreemat
    Aug 3, 2017 at 5:28

3 Answers 3

17

Use may use vh (viewport-height) and vw (viewport-width) length units to stretch to full available screen size:

.auth-container {
  height: 100vh;
  width: 100vw;
}

edit - Explanation: By using the css length unit % on height, you specify the height of the div relative to its parents height. Therefore, if the immediate parent (e.g.) has a smaller height than the viewport, it will not be enough. Only if you'd set all ancestor elements (html, body, ..., .auth-container) to height 100%, it would work this way.

0
3

You could utilize the vh and vw units, so,

height: 100vh 
width: 100vw

Here's some good follow up reading that goes through the pros and cons of this method https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

0
1

If you want to show top part of image simply use,

background-position-y: 0;

Since using cover property it will cut off a portion of your background.

also background-size: 100% 100%; for full image with responsive.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.