CSS linear gradient showing transparent bars at top and bottom of child div element, how do I fix?

Question

I'm using inline CSS on a website that only allows inline CSS and I'm having an issue with the child element below. On the linear gradient it keeps showing two transparent bars, one at the top and one at the bottom. When I take away the 'no-repeat' the bars stay but becomes the opposite colours (top colour on bottom bar, bottom colour on top bar).

I would be so grateful for any advice anyone has, I'm still new to coding and this is my self-appointed project to integrate what I've learned so far.

<div class="scroll cover red" style="
display: inline-block; 
width: 900px; 
height: 200px; 
max-width: 90%; 
background: linear-gradient(#b15960, #bf676f, #9d4b52); 
margin-left: auto; 
margin-right: auto; 
margin-top: -150px;">

        the child element with the problem below--->

<div class="scroll cover green with gold border" style="
display: inline-block; 
width: 750px; 
height: 200px; 
max-width: 80%; 
background: linear-gradient(#506d63, #5f7e77, #405d55) no-repeat;
border-width: 10px; 
border-style: solid; 
border-image: linear-gradient(to bottom, #c49648, #f7d692, ab7b3d) 1 100%; 
margin: auto;">
</div>

I've tried different things such as setting the height to 100%, background-size: cover, putting stops on the colours both as % and px, changing background to background-image, adding a degree to the linear-gradient or a direction & both, I even tried removing it as a child element to see if that was the issue.

For many of these it just made the div go transparent minus the border.

Nothing seems to be working for that specific part even though the border of that div is working just fine in every case.

Just FYI the border-image colour has a syntax error - it should have a # at the final colour i.e. border-image: linear-gradient(to bottom, #c49648, #f7d692, #ab7b3d) 1 100%; — Adam, Jan 16 '23 at 16:55

Adam · Accepted Answer · 2023-01-16T17:18:04.353

When I run your code the transparent bars are the missing border. Are you just wanting to have the same border all the way round your child div? If so you can set the border-image-slice just to 10 (i.e the border width) and it'll fill all the way round. There was a syntax error in your submitted code, a # was missing from a colour so it wasn't rendering at all. There's some info on border-image-slice using linear gradients here on StackOverflow as the info in MDN isn't clear imho.

<div class="scroll cover green with gold border" style="
display: inline-block; 
width: 750px; 
height: 200px; 
max-width: 80%; 
background: linear-gradient(#506d63, #5f7e77, #405d55) no-repeat;
border-width: 10px; 
border-style: solid;
border-image: linear-gradient(to bottom, #c49648, #f7d692, #ab7b3d) 10; 
margin: auto;">
</div>

If it's just that you want to render the element inside the border and extend it to the top then use this. Note the border-image-slice is set to 0 10 as the top and bottom borders are zero.

<div class="scroll cover green with gold border" style="
display: inline-block; 
box-sizing:border-box;
width: 750px; 
height: 200px; 
max-width: 80%; 
background: linear-gradient(#506d63, #5f7e77, #405d55) no-repeat;
border-width: 0 10px; 
border-style: solid;
border-image: linear-gradient(to bottom, #c49648, #f7d692, #ab7b3d) 0 10; 
margin: auto;">
</div>

CSS linear gradient showing transparent bars at top and bottom of child div element, how do I fix?

1 Answers1