Full size background image with linear gradient overlay

[Marcel van Leeuwen]

Hi guys,

I’m building a personal website based on the Bootstrap framework. Im using sections in the HTML. The first section is “the first page” and I want it to be filling the full viewport. Next to this I also want to use a background image with an gradient overlay filling the viewport.

It’s not working right; on desktop the background seems to size ok, but on iPad and mobile it doesn’t resize and I can’t find the problem. Here is the link to the codepen: http://codepen.io/amvanleeuwen/pen/NqeKxP
And here is the working website: http://www.digifocus.nl
I hope some one can help me and point out what i’m doing wrong.

Thanks!
Marcel

[Paulie_D]

The first section is “the first page” and I want it to be filling the full viewport.

Next to this I also want to use a background image with an gradient overlay filling the viewport.

By “Next to” do you mean side by side or underneath?

[Marcel van Leeuwen]

Hi Paulie,
I mean “and” I want the first section to be full page and I want it to have a full page background image.

[Paulie_D]

I think I’m getting what you are after.

You need to set the height of .home to be 1005 of the viewport height.

.home{
  margin:0;
  padding: 18em 0em;
  background-color:rgba(0,0,0,1.0);
  height: 100vh;
}

http://codepen.io/anon/pen/EjGVqa

[Marcel van Leeuwen]

Does this also take care of the resizing of the background image? Because this is the problem that the background image doesn’t properly resize on a iPad or other screen sizes.

[Paulie_D]

That’s a much bigger question I suspect which owuld depend on which browser you are using as some don’t support background-size:cover.

You might want to look into some of Chris’ articles..I’m fairly sure he had one on perfect full screen images.

Search this site.

[Author]

Posts