Html half background image-CodePudding

I wanted to set the background image to only fill half of the screen (right half), because I want to put divs and contents on the left half of the screen, in Conclusion I wanted to make split screen, left half for the contents, and right half for image only, how do I do that ?

Right now, I'm doing it by making a half screen sized div, but the problem is the background image is still a full screen sized image, so how do I make both of them split ?

CodePudding user response：

*{
  box-sizing:border-box;
}

body{
  margin:0;
}

.parent1{
  width:100%;
  height:100vh;
  background-image:url('//picsum.photos/1920/1080');
  background-size: 50% 100%;
  background-position: right;
  background-repeat:no-repeat;
  margin-bottom: 20px;
}

.child1{
  width:50%;
  padding:20px;
}


.parent2{
  width:100%;
  height:100vh;
  display:flex;
  align-items:stretch;
}

.parent2 > .content,
.parent2 > img{
  width:50%;
}

.parent2 > .content{
  padding:20px;
}

<!-- Example 1 -->
<div >
  <div >
    <h4>We are Creative</h4>
    <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. </p>
  </div>
</div>


<!-- Example 2 -->
<div >
  <div >
    <h4>We are Creative</h4>
    <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. </p>
  </div>
  <img src="//picsum.photos/1400/700" />
</div>

Try this above two example. I hope these example can resolve your requirement.

CodePudding user response：

<div style="display: flex; flex-direction: row;">
  <div style="width: 50vw;">
         content
  </div>
  <div style="width: 50vw;">
     <img src="image.jpg" style="width: 100%;" alt="image">
  </div>
</div>