HTML/CSS - image over image with parallax effect

Question

I'm working on WordPress website and I'm trying to add an image over a hero image.

I need to put the logo in the center of the background image. Now is horizontal centered but not vertical centered.

Working with page builder, siteorigin product, I've added a Custom HTML widgets.

To obtain what I need, I've added this code:

 .logo { height: 30%; display: block; margin: auto; width: auto; z-index: 10; } .parallax { /* The image used */ background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrOVtRWjOvjg%2Fmaxresdefault.jpg&f=1&nofb=1"); /* Set a specific height */ height: 100vh; width: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; }

 <div class="parallax"> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ff9%2FUKF_basic_logo.svg%2F1024px-UKF_basic_logo.svg.png&f=1&nofb=1" class="logo"/> </div>

Answer 1

Here you go with a solution

Use position as absolute

 .logo { height: 30%; position: absolute; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; z-index: 10; } .parallax { /* The image used */ background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrOVtRWjOvjg%2Fmaxresdefault.jpg&f=1&nofb=1"); /* Set a specific height */ height: 100vh; width: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; position: realtive; }

 <div class="parallax"> <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ff9%2FUKF_basic_logo.svg%2F1024px-UKF_basic_logo.svg.png&f=1&nofb=1" class="logo" /> </div>

Use position: absolute for logo and the set the top and left as 50% . Then use transform to adjust the logo to center with left over height and width.