背景和相对位置的HTML和CSS问题

Question

I have a problem with html and css.

Today, for the first time, I've tried to make a page with a big image for the background.

I'm using foundation framework, and I'm stuck on one thing. As we know foundation is a adaptive framework and when I re-size my browser, I've got a bug.

You can see it on my screenshot: https://imgurhd.ru/i/270a.jpg (also here you can find my css).

I need to make the text and image under menu vertically centered on any screen size.

I'm using position relative with a percent value, as you can see. So please help me to find where is the problem.

Answer 1

You can set the background size to cover .

Cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

html { 
  background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This is supported in most recent browsers