Member Avatar for zobadof

Hi,

I've split an image in two, and I want to put them next to each other but with a break. As you can see the BG2 (In The Box) paint splat is right next to the edge. I want it a few px in and the bg1 (out of box) to level with it.

Everything I try just moves the entire #content and not bg1. If you could help me I'd appreciate this, I can normally do these things but It's just not working. The website is: ... It's a website I'm designing for a family member. Please post the editited code, or code to edit.

Thank You.

  • 3 Contributors
  • 3 Replies
  • 179 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

split the artwork into two halves and needs them placed side‑by‑side with a small gap so the “in‑box” splat sits a few pixels off the edge while the “out‑of‑box” half lines up. was right to suggest offsetting the graphic, but a more robust approach is to give each slice its own element and control spacing/alignment with layout rules rather than moving the whole page wrapper.

A concise flexbox pattern (modern, responsive, and precise):

<div class="image-split">
  <div class="half left" aria-hidden="true"></div>
  <div class="half right" aria-hidden="true"></div>
</div>
.image-split {
  display: flex;
  gap: 6px;              /* small break between halves */
  align-items: flex-start; /* keep tops aligned; use center/baseline to change */
}

.image-split .half {
  width: 240px;          /* match slice width */
  height: 180px;         /* match slice height */
  background-repeat: no-repeat;
  background-size: contain;
}

.image-split .left  { background-image: url("slice-left.png"); }
.image-split .right { background-image: url("slice-right.png"); }

If flexbox is not desirable, an inline-block approach works as a fallback: place two <img> tags next to each other, use vertical-align: top and a small margin on the right/left to create the gap. To nudge a single half up/down, use a small margin-top or transform: translateY(...) on that element only.

Troubleshooting tips: inspect the exact element in browser devtools — styles applied to the body or to the outer #content will shift the whole layout. Use specific selectors (for example #content .right) so only the slice moves. Check for image slice heights, background-repeat, and that padding/margins on the container aren’t collapsing. For precise overlaying without affecting layout, consider a positioned pseudo-element, but reserve absolute positioning for cases where the flow should not respond to the images. ’s HTML suggestion isn’t necessary here; the element-based approach above gives deterministic control.

Recommended Answers

All 3 Replies

Member Avatar for |-|x

so, you want to move the background image to the right?

background-position-x: 5px;

and try background-position: 50px 200px; on your body background to move the image lower and to the right.

Edited by |-|x
commented: good response +5
Member Avatar for mustaffa hasan

<div><img src="c:\folder\in.jpg" width=12>
</div>

Member Avatar for zobadof

background-position-x: 5px;

Thanks that really helped. In regards to the other guy, not a clue what you're on about!

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.