Member Avatar for dinok

Hello people of daniweb. I'm new here :)

Anyways, I have issue with my css.

I have top picture which is exaclty of 570px height, and it has some gradient in it so it is not repeatable.
I have middle (or center) picture which is 1 px height and same width as top and bottom (912px) and I need to repeat it over y line.
I have bottom picture which is 7px height and of 912px width.

This is my html code:

<div id="newswrapper-repeater">
    <div id="newswrapper">
        // here goes text that should be long regarding the divs inside,
        // (news divs and stuff)
    </div>
</div>
<div id="newswrapper-bottom"></div>

This is my css code:

/* News wrapper and other is stored here*/
#newswrapper-repeater {
    background:url(images/newsbgrepeater.png) repeat-y;
    width:912px;
    min-height:571px;
    margin:auto;    
    margin-top:230px;
}
#newswrapper {
    position:absolute;
    background:url(images/newsbgtop.png) no-repeat;
    width:912px;
    min-height:571px;
    margin:auto;    
    margin-top:-10px;
}
#newswrapper-bottom {
    background:url(images/newsbgbottom.png) no-repeat;
    width:912px;
    min-height:7px;
    margin:auto;    
}

It now has as you see, a repeater div which is 230px from top, a normal news div with gradient image and its set to -10px margin to move from the repeating div, and the bottom one is there excluded from repeater div but after it.

The thing is, that div in middle is not repeating at all. Assistance needed!! :) Thanks!

Edited by dinok because: typo
  • 1 Contributor
  • 1 Reply
  • 199 Views
  • 30 Minutes Discussion Span
  • Latest Post Latest Post by dinok

Dani AI

Generated

Nice catch by — the repeating strip failed because the content element was absolutely positioned and therefore removed from the normal flow. Absolutely positioned elements do not affect the height of their parent, and that often makes a parent seem to “lose” the area where a tiled background should appear. (developer.mozilla.org)

A simple, modern fix is to keep a single wrapper and use CSS multiple backgrounds so the top image (no-repeat), the 1px-tile (repeat-y) and the bottom image (no-repeat) are stacked in one rule. This avoids extra markup and flow issues. Example (replace filenames/heights as needed):

.news {
  width: 912px;
  margin: 230px auto 0;
  /* top, then middle (tile), then bottom */
  background:
    url("top.png")    no-repeat top center,
    url("middle.png") repeat-y   center,
    url("bottom.png") no-repeat bottom center;
  /* reserve space if the top/bottom images cover content */
  padding-top: 570px;
  padding-bottom: 7px;
}

Multiple background layers are supported in modern browsers and let each layer have its own repeat/position rules. (developer.mozilla.org)

If image positioning needs to be more flexible, another pattern is to keep the repeating tile on the wrapper and place the top/bottom graphics in ::before / ::after pseudo-elements. The wrapper stays position: relative; while the pseudos are absolutely positioned inside it. Example:

.news {
  position: relative;
  background: url("middle.png") repeat-y center;
  padding-top: 570px;
  padding-bottom: 7px;
}

.news::before,
.news::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none; /* decorative only */
}

.news::before {
  top: 0;
  height: 570px;
  background: url("top.png") no-repeat center top;
}

.news::after {
  bottom: 0;
  height: 7px;
  background: url("bottom.png") no-repeat center bottom;
}

Pseudo-elements are a good way to keep markup minimal while keeping decorative layers separate from content. (developer.mozilla.org)

Quick troubleshooting checklist: confirm the element that should tile is in normal flow (no absolute unless intentionally layered), check computed heights in devtools, verify image paths (network tab), and prefer padding to negative margins so content isn’t covered. The background shorthand and layering rules are useful to understand when combining images. (developer.mozilla.org)

Member Avatar for dinok 
position:absolute;

was issue, thanks :)

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.