Member Avatar for SimonIoa

Hello i want to create in html and css something like the picture i shared here. An image over two divs. Equally divided through the two divs like the picture here. Any sugestion?

sample.png

Edited by SimonIoa
  • 5 Contributors
  • 4 Replies
  • 4K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by ZoyaHall

Dani AI

Generated

If you want the image to straddle two side-by-side panels without slicing it, you can layer a single image as a third grid item that spans both columns. This keeps the markup simple, scales responsively, and avoids floats and fixed widths. Building on ’s positioning idea and ’s background note, here is a modern CSS Grid approach that centers the image so exactly half sits on each side.

<div class="split">
  <div class="panel left"></div>
  <div class="panel right"></div>
  <img class="overlay" src="blob.png" alt="" aria-hidden="true">
</div>
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;            /* adjust to your layout */
  position: relative;
}

.panel { min-height: 320px; }
.left  { background: #2b6cb0; }
.right { background: #e53e3e; }

.overlay {
  grid-column: 1 / -1;          /* span both columns */
  justify-self: center;         /* center horizontally */
  align-self: center;           /* center vertically */
  width: clamp(120px, 28vmin, 280px);
  height: auto;
  z-index: 1;
  pointer-events: none;         /* allow clicks on content below */
  display: block;
}

How it works: the image is a grid item that spans both columns, so it layers over the left and right panels. Because the columns are equal, centering guarantees the image is split evenly between them. Use alt="" and aria-hidden="true" if the shape is purely decorative; otherwise provide meaningful alt text, as hinted depends on your real goal.

Older-browser fallback: if you must support IE11, either center an absolutely positioned image or do what suggested and slice the asset into two halves. For purely decorative shapes, a ::before background on .split also works.

Recommended Answers

All 4 Replies

Member Avatar for samps

How about splitting the black blot in two horizontally and aligning the top half to the bottom of the top div and the bottoom half to the top of the bottom div?

Member Avatar for zzmrzz

You can do it a couple of ways. What exactly do you need? Should it fit the whole website or what? :)

Member Avatar for Purvi_1

Hello here is the code you needed:

HTML:

    <div id="container">
        <div id="leftSide">
        </div>
        <div id="rightSide">
                  <div id="circle">
        </div>
        </div>
    </div>

CSS:

#container{
    width: 600px;
    float: left;
    padding: 0;
    margin: 0 auto;
    position:relative;
}

#leftSide{
    width: 300px;
    height: 300px;
    float:left;
    background-color: blue;   
}

#rightSide{
    width: 300px;
    height: 300px;
    float:left;
    background-color: red;
}

#circle{
    width: 100px;
    height: 100px;
    background-color: black;
    position:absolute;
    border-radius:50%;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;    
}
Member Avatar for ZoyaHall

A good answer was given above, option POSITION will definitely help you.
If this option does not help you, you can try to do this using the BACKGROUND property, and align it as you need.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.