How can I make it so that the image is the same height as its container and has the parallax effect?

Question

I want the section of the website to look like this:

But right now mine looks like this:

How can I increase the height of the image on the right to cover the full height of the about-sec container? And how can I then increase the height of the about-sec container so that the whole image can be seen to the right as shown in the example above while keeping the parallax effect?

Here is my CSS code:

.about-sec {
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background-color: white;
  padding: 2% 0.5% 10% 0.5%;
  overflow: hidden;
}

.left-half {
    width: 50%;
    position: abosulte;
    height: 100%;
    left: 0px;
    /*  */

}

.right-half {
    position: absolute;
    background-image: url("aboutSectionImage.jpg");
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 50%;
    right: 0px;
    height: 6em;
    display: flex;

    /* padding-left: 10%;
    padding-top: 10%; */
}

Here is my React/HTML code:

import React from 'react';
import './aboutSection.css';


class AboutSection extends React.Component {

    render() { 
        return (
            
               
                    asd
               
               
                   Hi
                   


                   df
               
               
            
        );
    }
}
 
export default AboutSection;

EDIT

The image to the right of the screen works and now I'm trying to add a parallax scrolling effect. The effect works for me but the I'm not sure how to make the image only take up half the page (right side). When I set background-size: cover; it should take up the whole size of the div, in this case, the right-half div. For some reason the image is super huge and it looks like this:

Does anyone know why this happens?

CSS code:

 *{
    box-sizing: border-box;
  }
  .about-sec{
    display: flex;
    flex-direction: row;
    height: 90vh;
  }
  .left-half{
    height: 100%;
    width: 50%;
    background: white;
  }
  .right-half{
    height: 100%;
    width: 50%;
    background-image: url("aboutSectionImage.jpg");
    background-color: #cccccc;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Yong · Accepted Answer

Check the below css code for your reference. You really don't need the position: absolute; on your right-half class. You should only use positioning to do minute changes and you should not use it to do your layout. It seems that you are also not familiar on how flexbox works check this link to familiarize yourself with it.

Edit: The reason the image is behaving like you have described is because of the background-size property that has been set to cover. I've set it specifically for this case to 50% for its width and 100% for its height. You can learn more about the said property and its syntax here.

*{
  box-sizing: border-box;
  margin: 0;
}
.about-sec{
  display: flex;
  flex-direction: row;
  height: 120vh;
}
.left-half{
  height: 100%;
  width: 50%;
  background: blue;
}
.right-half{
  width: 50%;
  height: 100%;
}
.parallax {
  height: 100%;
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.mmppicture.co.in%2Fwp-content%2Fuploads%2F2022%2F01%2FPicsart-Background-218-901x1080.jpg&f=1&nofb=1');
  background-attachment: fixed;
  background-position: right;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  padding: 10px;
}
.content{
  color: black;
  background: white;
  padding: 10px;
}


  
    
      
      left
      
      
        
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea labore, culpa quos impedit exercitationem odit repudiandae ipsa aperiam? Dolor dolores omnis doloremque facere ipsam vitae, minima sint pariatur veritatis blanditiis.
    Aliquid voluptates deserunt est, error dolorem quasi similique sapiente veniam quos facere beatae laborum adipisci earum perferendis perspiciatis non fugit repellendus officia deleniti libero animi doloribus? Tempore quae vitae autem?

How can I make it so that the image is the same height as its container and has the parallax effect?

Answers (2)

Related Questions