CODEWITHSUNDEEP
htmlcss
randomuser1
randomuser1

Reputation: 2803

How can I make my webpage background cover fixed for the full size page in css?

I have the following CSS code:

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 900px;

    background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
}

And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this https://i.sstatic.net/RBbAU.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that? Thanks.

Upvotes: 0

Views: 68

Answers (3)

Thomas Theunen
Thomas Theunen

Reputation: 1274

You can also set the height to

height: 100vh;

http://caniuse.com/#feat=viewport-units

Example css for Hero template:

.hero {
  position: relative;
  padding: 60px 0 60px 0;
  min-height: 100vh;
  background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
}

Upvotes: 1

João Vilaça
João Vilaça

Reputation: 621

Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.

Imagining the div with the video part has a class of 'video-section', you could do:

@media (max-width: 600px) { 

    .video-section {
         display: none;
  }

}

Upvotes: 0

Topher
Topher

Reputation: 498

Use this:

background-size: 100% 100%

This should stretch it to 100% of both X and Y.

Upvotes: 0

Related Questions