Board Thread:Support Requests - Designing Your Wiki/@comment-27075564-20190710163736

So I'm trying to create a new updated look to these infoboxes and tried to incorporate some of the style elements of the website into it, like a border (acting as a background image on the right side like in the first image here). It appears fine when the image doesn't stretch from edge to edge in the infobox, but as you see in the second image, when it does it overlaps that background image/border. I'm trying to figure out the easiest method possible to create an overlay on top of the infobox so that right border will overlap any images. In this regard it's preferable to adding something either in css or the template itself than editing each individual page (like trying to add a wrapper around each template). This is the code I did so far specific to just that border:

.portable-infobox { margin-right:5px; margin-top:5px; border:1px solid #ffef00; border-radius:10px 0px 0px 10px; background-color: #111111 !important; background-image: url("https://vignette.wikia.nocookie.net/cyberpunk/images/6/60/Cyberpunk_2077_razor_vertical_edge.svg"); background-repeat: repeat-y; background-position: 100% 0%; background-size: 5% 100%; padding-bottom:4px; -moz-box-shadow:0px 0px 5px rgba(255,239,0,0.75); -webkit-box-shadow:0px 0px 5px rgba(255,239,0,0.75); box-shadow:0px 0px 5px rgba(255,239,0,0.75); } (Sorry, forgot to mention, there's no public view of the CSS I'm using, as I've been using the debugger tool and saving the code in text files until I can get it full fixed) 