CODEWITHSUNDEEP
htmlcsswordpressparallax
Giacky
Giacky

Reputation: 181

HTML/CSS - image over image with parallax effect

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>

Upvotes: 1

Views: 2690

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 2

Related Questions