Giving a background image into a border (zig zag) issue

HTML & CSS
1

Hi there,

I have the following that is a div with a background and also a div underneath that has a border to create a zig zag.

https://jsfiddle.net/toolman/2kozd6e1/6/

What I am wondering is how I can have the pattern in the top div appear inside the zig zag. If I apply it to the zig zag, I don’t think it will line up and I am not sure how to add the zig zag part of the top div so it is one element with a background.

What would be the best way to achieve this?

Thanks!

2

In the JsFiddle it seems the image used as background and the background jig-saw aren’t the same dimensions.

Then to make the after-background line up ((with the åarent background), the parent background needs to start at bottom with some adjustment. background-position: left 0 bottom -??px

Also, if using this strategy,the after parent might need a negative z.index to show underneath the parent background-

Another strategy could be to create the border at a the parent or an after element.

There are many ways to accomplish this. :slight_smile:

3

Hi again.

One option would be to add a zig-zag class to the container’s parent and give the pseudo element to that class.

Then what I think you tripped on was the angle value. Add 180 to the 45 to flip the gradient and get the transparent on top and then use the dark background color to the bottom side.

A stand alone example:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Title</title>
<style>
.store-mart-lite-top-header-wrap {
    padding: 10px;
    background: url("https://i.ibb.co/W0JR0Rf/cross-pattern.gif") repeat #ebca99;
    background-size: 18px; /* matching the gradient */
    background-position: left -2px bottom 0; /* to fit the pseudo bg */
}
.zig-zag::after {
    display: block;
    margin: 0 -10px -10px; /* soak up padding */
    width: calc(100% + 20px);
    height: 28px; /* 18px + padding */
    background-image: linear-gradient(-225deg, transparent 16px, #a01028 0), linear-gradient(225deg, transparent 16px, #a01028 0);
    background-repeat: repeat-x;
    background-position: left -9px bottom 0; /* 9px to adjust the flip */
    background-size: 18px 28px; /* height matches element */
    content: " ";
}
</style>
</head><body>

<div class="store-mart-lite-top-header-wrap zig-zag">
    <div class="container ">
    Pattern now going into the zig zags
    </div>
</div>

</body></html>

Saved as an anonymous fiddle to play with: https://jsfiddle.net/02gfxwkp/

2 Likes
4

Hi @Erik_J,

Thank you very much, that worked perfectly. I changed the background position to -12px so the zig zag looked as though it had the pattern in it too.

Thank you very much for helping with this :slight_smile:

1 Like
5

I know his is solved with Eriks help but just wanted to mention that you could have used multiple backgrounds on the one element to achieve the effect without extra elements.

e.g.

The cross hatch effect could also be a linear gradient instead of an image if you wanted to spend some time messing around with it :slight_smile:

1 Like
6

Good to see how multiple backgrounds would solve the issue too.

Thanks for the CSS-Tricks link! The cross pattern seemed too awkward to figure out.

1 Like
7

Yes, it’s a bit awkward but you can get close with trial and error.

Not perfect but pretty close.:slight_smile:

It could probably be simplified but I stopped playing around when I got close :slight_smile: (only checked in Chrome).

1 Like
8

Also works perfectly in Opera, Vivaldi, Brave, Firefox and the old Firefox fork Pale Moon.

Did I mention Chromium? :slightly_smiling_face:

Haven’t checked mobile browser.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.