HTML Position image behind border and wrapping link above

Question

I have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.

Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.

Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.

http://jsfiddle.net/hc3jrkku/

Basestructure:

<header>
    <nav>
        <a href='?p=faq#faq' id='faq'>
            FAQ
        </a>
    </nav>
</header>
<div class='leftSide'>
    <a href="#anchor" class="bgImage"><img src="img/some.png" style="
    position: relative;
    z-index: -1;
    opacity: .99;
    border: 1px solid red;
    width: 150px;
    height: 200px;
    background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>

CSS:

* {
    box-sizing: border-box
}

body {
    margin: 0;
}

.leftSide{
    position: fixed;
    z-index: 0;
    top: 20px;
    right: 50%;
    transform: translateX(-50%);
    width: 808px;
    height: 100%;
    display: flex;
    justify-content: flex-end; 
    margin-right:-93px;
    padding: 15px 93px 90px 0;
}

.rightSide{
    position: fixed;
    z-index: 0;
    top: 20px;
    left: 50%;
    transform: translateX(50%);
    width: 808px;
    height: 100%;
    margin-left:-93px;
    padding: 15px 0 90px 93px;
}

a.bgImage {
    z-index:900;
    opacity:.99;
    border:2px dashed blue
}

.rightSide .bgImage {
margin-left: -93px;
}

.leftSide .bgImage {
margin-right: -93px;
}

main {
    width: 808px;
    min-height: 400px;
    margin: 20px auto 0;
    position: relative;
    z-index: 50;
    border-style: solid;
    border-width: 0px 93px 127px 93px;
    border-image: url(img/paperedge.png) 0 93 127 93 fill round;
    padding-top:10px;
}

header {
    height: 20px;
    background: #ffffff url(img/header_bg.png) repeat-x bottom;
    border-bottom: 1px solid #000000;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100
}

nav {
    display: flex;
    justify-content: center;
}

Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?

See these: http://jsfiddle.net/hc3jrkku/3/ and http://jsfiddle.net/hc3jrkku/4/ I dont get the problem you are facing. Can you please explain more plainly? Do you want the image in front of the black border or in the back? If you want it in the back, do you want the link to be available on the border? That is not possible — Raein Hashemi, Dec 24 '14 at 11:35
@RaeenHashemi: Since I only saw that you changed the image to be in front/ the opacity of main I think I should explain 'ragged border'. Take a look at [these images](https://www.google.de/search?q=torn paper&tbm=isch). If you look at the torn paper you will notice a zigzag edge. I want the image below the border and a link above since it is confusing with a 100px border if depending on how ragged the curent part is up to 50 px of the image are showing through but are not clickable since the border blocks the link. (The thing you claimed to be not possible) — ted, Dec 25 '14 at 09:47
Are you looking for something like this: http://jsfiddle.net/hc3jrkku/6/ ? if so, let me know to post it as an answer — Raein Hashemi, Dec 25 '14 at 10:32

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:

main {
    pointer-events: none;
}

This will kill the events on your div and make the behind events visible in the front: DEMO

You can also search more and find these similar topics:

edited May 23 '17 at 12:28

Community

1
1

answered Dec 25 '14 at 10:43

Raein Hashemi

3,346
4
22
33

1

Thanks, works perfectly, I just added another wrapper with `pointer-events:auto` inside my content box, so the content (except the border) is clickable (hackish http://jsfiddle.net/hc3jrkku/7/, i will try to improve this and get rid of the need for a wrapping container.) – ted Dec 25 '14 at 11:03

HTML Position image behind border and wrapping link above

1 Answers1