overlay a pattern on all elements

Question

Is it possible to put an image (a pattern) over 2 or more elements (with different background)? (something like Pattern Fill in Adobe Photoshop)

Here's a screenshot: enter image description here

Note: Elements content should be selectable by users. I don't want an div which is over on other elements.

An image with the stripes with transparent areas between the stripes laid over a background colour. Adjust background position on the elements so the stripes meet up. — David says reinstate Monica, Dec 25 '12 at 11:53
@DavidThomas: it does the work for 1 element. what about others? (in screenshot, we have 2 main element, navigation bar and site logo).. — mrdaliri, Dec 25 '12 at 11:58
@DavidThomas: what do you mean? I have 3 DIVs, with 3 different backgrounds. and I want to put that strips (or any other patterns) over all 3. — mrdaliri, Dec 25 '12 at 12:15
@kikio: I think David Thomas means that without seeing your HTML, we can’t be very specific about how to achieve the effect you’re going for. — Paul D. Waite, Dec 25 '12 at 12:40

score 0 · Accepted Answer · edited May 23 '17 at 12:32

Make a .png file (or .gif if you prefer that) and simply overlay this over the div you would like to have this pattern.

You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp

relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

absolute The element is positioned relative to its first positioned (not static) ancestor element

Source: Position overlay div

Code example:

<div class="overlay">
    <div class="overlay-content">
    </div>
    Content goes here
</div>

And for the css:

div.overlay{
    position: relative;
}

div.overlay-content{
    position: absolute;
    top: 0;
    left :0;
    width: 100%;
    height: 100%;
    background: url(path/to/image.png) repeat top left;
    pointer-events:none; /* To be able to click through */
}

About the click trough, have a look at this answer: Click through a DIV to underlying elements

@it's your code: http://jsfiddle.net/C3Pkr/1/ .. (i changed background image to color and add an opacity to be like a transparent background image).. but content isn't selectable by user. for example, "Link #1" can't be clicked. — mrdaliri, Dec 25 '12 at 12:50
Add the property `pointer-events:none;` I'll update my post. http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements — Jelmer, Dec 25 '12 at 13:05

overlay a pattern on all elements

1 Answers1