使用封面背景图片调整元素的大小

Question

I'm not entirely sure if this is as simple as it should be. I've been trying different methods but I cant seem to wrap my head around it.

I've got a cover section on my front page containing a logo and a button inside:

<section id="cover">

        <div id="cover-caption" class="animated fadeInDown">

            <p style="padding-bottom: 2rem;"><img src="http://bizcentralusa.com/wp-content/uploads/2016/05/placeholder-sample-logo.png" alt="Sample Logo" /></p>
            <p class="lead">
                <a class="btn btn-primary btn-lg" data-scroll href="#getStarted" role="button">GET STARTED <i class="fa fa-angle-right animated wobble infinite" aria-hidden="true"></i>
                </a>
            </p>

        </div>

    </section>

The background of the cover page is an image of a laptop which half covers the page. I want the logo and button to sit in-between the top of the page and the start of the laptop screen.

This is what I've got so far (I think its easier for you to just visually see what I'm trying to achieve than have me explain it)...

Demo

Normally I would just put some padding on the #cover-caption container until it pushes down to the position I want but this doesn't work for all screen resolutions. It looked nice on the PC I'm editing with but when I tested it on my Macbook, although the logo and button were in the same position the background image had changed because the browser height was different. I guess what I'm trying to do is get my logo and button to auto adjust their position to change with the background image when the height of the browser window is changed. This this even possible?

This is my full code

Answer 1

This should be easy via css flexbox and viewport height.

#cover-caption{
  display: flex;
    height: 66vh;
    flex-direction: column;
  justify-content: center;
}
#cover-caption > *{
  flex: 0 1 auto;
}

See adapted fiddle

Answer 2

You should try css like

#cover-caption{
    display: block;width: 20%;margin: 20px auto;position: relative;top: 100px;
}

This might help.