CODEWITHSUNDEEP
htmlcssbackground-image
user1137236
user1137236

Reputation: 23

Repeat second background image under first image

I'm trying to use 2 instances of background-image in one <div> layer. The first background-image (which is partly transparent) should be displayed at top of the <div>, the second should be displayed directly under the the first background-image (this works).

Due dynamic content the second image with a height of 1px should be repeated vertically (repeat-y) and start repeating under the first background-image. My Problem is when I try to repeat the second background-image it is repeated over the whole <div> layer.

.mainFrameRoundBorder {
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
    background-repeat: no-repeat, repeat-y;
    border-radius: 0 0 0 0;
    box-shadow:0 0 0 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-position: center top, 0px 364px;
    margin-top:10px;
    padding: 6px 15px;
    overflow: hidden;
    color: #FFFFFF;
}

Upvotes: 2

Views: 2777

Answers (2)

user1136975
user1136975

Reputation:

I would suggest you to use z-index

Upvotes: 0

mbxtr
mbxtr

Reputation: 2313

I would suggest using the :before or :after pseudo-selectors. You could place your repeating background on the div as you normally do, and then put the non-repeating background in a pseudo-selector element.

This tutorial should be able to give you some good pointers on this method:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Upvotes: 1

Related Questions