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.
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>
Correct. it should be, let’s say, vertical:center; orizzontal:center;
Thank you. It works on JSFiddle, but not on the website. Logo is now in the center of the entire page and not in the center of div
Don’t know if you can help me more, but my parallax effect is not working on Firefox. Do you maybe know how to fix it?
same code. Don’t know why is not working. EDIT: your example works properly, but in the website on WordPress is not working
