Full Height Viewport Backround Image/Eventually Video to Replac

HTML & CSS
1
  1. So I’m working on trying to establish the background image you see at the top to use the full viewport height.

What I have tried:
I’ve already tried adding the background image to the <header> element. This will work, except the top header (where the menu resides) needs to stay in a fixed position during scroll and the background image needs to have the “CELEBRATING VICTORIES & INCLUSION WE ARE BREAK THE BARRIERS!” message vertically centered on the background image instead of being pushed below the background image (with all of the other elements) and all of the other elements need to be viewable during scroll.

Therefore, is there any way to make it work with the way it is currently coded? Or are there any other suggestions?

2: Eventually that background image is going to be replaced with a video, which will also have to be at full viewport height. Thanks to megazoid’s suggestion, I can do that. But I need to make sure it will work when I eventually remove the background image.

This may seem like a rather ‘facepalm’ moment for you guys out there, but I’m always learning and appreciate the help.

2

I’ve been having a look at it, and I’m having difficulty finding the element that has the background image applied. Which is it? I was thinking you could set it to height: 100vh to fill the viewport.

1 Like
3

Yes, I’m not sure what element you mean either?

If you mean the image on body.home then just set it to background-attachment fix and background-size:cover.

body.home {
    background: #457dc8 url("../images/image.jpg") no-repeat scroll left top;
    background-size: cover;
    background-attachment: fixed;
}
4

There it is.

I’m not sure what type of background the OP wants. That’s what I’d do for a fixed full-page background. But I was thinking of one of those “cover page” title ones that fill at the top, but scrolls out of view.

5

Try this. I’m not sure if it’s what you wanted, but it’s how I interpreted it.
Set: body.home { background-size: 100%;}
and set: .videoplay { height: 100vh;}

EDIT
Hang on, that’s not good on a small screen.

EDIT Again

I would suggest bg-size cover, but being in the body, it goes stupidly large. It may want its own container.

6

That’s why I set it to fixed and cover so that it always fills the viewport and not the whole document. You can’t stretch an image over the whole document without blowing it to pieces unless it was a very small site (height wise).

7

That works, but I wasn’t sure if the OP wants the image fixed or wants to keep it scrolling.

Yes, being in the body, it stretches to the full height of the entire document. But putting the image in its own container would fix that, wouldn’t it?

8

If you mean the image on body.home then just set it to background-attachment fix and background-size:cover.

This I did apply in addition of applying 100vh to .videoplay and it looks very nice. The responsiveness I will tweak when the video resizes for tablets/phone devices.

Thank you, gents.

9

Well I guess I spoke a little too soon. It seems that the background-color is not kicking it for the footer area because I’m using both the background color and the background image for <body>. You can see this sad effect scrolling to the bottom.

So I guess I would need to put the background image in a separate container applying the same styles as I have set for <body>? Or is there a better workaround?

10

What background-color did you give the footer?

11

The footer element is a separate box inside the body element. Applying a background-color to the footer element overlays the background-image on the body.

12

I figured that would fix it, but I didn’t know if I should worry about any other future elements would cause the <body> element to go beyond the <footer> element and cause the background image to appear?

13

Not sure what you mean, but the same trick could apply to any element. Applying a background-color will cover the image behind.

14

By default, the <html> and <body> elements fill the viewport whatever its size.

IF the footer is a “sticky footer” that follows the bottom of the content below the bottom of the viewport OR sticks to the bottom of the viewport if there is insufficient content to push it below the bottom of the viewport,
OR if the footer is fixed to the bottom of the viewport and never moves even if more content is added above it,
THEN no future elements would appear below the footer.

IF the footer is NOT a “sticky footer” and the content is insufficient to push the footer to or below the bottom of the viewport,
THEN, YES, a background-image applied to the <body> element will appear below the footer.
That’s how the <body> element works unless otherwise restricted by dimensions (not usually recommended).

Hope this helps somewhat.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.