Member Avatar for aizel
aizel 0 Newbie Poster

good evening to all :) i am having a problem with my css lesson and i hope you guys code help me :)

this is 3 layer image result:
[IMG=][/IMG]

this are the image needed to create the 3 layer image

the logo
[IMG][/IMG]

left photo
[IMG][/IMG]

the line( it has transparent bg)
[IMG][/IMG]

Edited by aizel because: n/a
  • 1 Contributor
  • 0 Replies
  • 104 Views

Dani AI

Generated

For : two practical ways to make a three‑layer header without repeating the image URLs you already posted.

One: CSS3 multiple backgrounds (single element, no extra markup). Note that the first image in the list is drawn on top of later ones.

.header {
  width: 960px;
  height: 160px;
  background-image: url('layer-top.png'), url('layer-middle.png'), url('layer-bottom.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right center, left center, center;
  background-size: auto, 220px auto, cover;
}

Two: stacked elements or pseudo-elements (better when you need different behaviors or older-browser fallbacks). Keep the container position: relative, then use absolutely positioned children or ::before/::after for the extra layers and control stacking with z-index.

.header { position: relative; width: 960px; height: 160px; background: url('base.jpg') center/cover no-repeat; }

.header::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 220px; height: 100%;
  background: url('left-photo.png') left center no-repeat;
  z-index: 2;
}

.header::after {
  content: "";
  position: absolute;
  right: 20px; top: 10px;
  width: 140px; height: 80px;
  background: url('logo.png') right center no-repeat;
  z-index: 3;
}

Troubleshooting & tips: ensure the parent is positioned (non‑static) so absolute children layer correctly; PNG must be true alpha for clean transparency; if z‑index seems ignored check for new stacking contexts (transforms, opacity); use background-size or responsive media queries for scaling; older IE that lacks multiple backgrounds needs the stacked‑elements fallback; optimize images or combine into a sprite/SVG for fewer requests.

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.