Image divider above footer using ::before pseudo element - css

Question

I am using Bootstrap (5) and have simple footer like this:
What I need is simple divider on top of it (above), adding 100px.
Check the fiddle here: https://jsfiddle.net/Ls1vhncx/5
How can I get the same result using ::before pseudo element, so I can avoid extra div with no content?
footer {
background: #555;
}
.img-border {
height: 100px;
width: 1920px;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
background-color: #555;
background-position: center;
background-attachment: fixed;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="img-border"></div>
<footer>
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>

Answer 1

You can make space for the border by setting a top margin on the footer.
Then you can put a before pseudo element on it which has bottom 100% (ie sits on top of the footer) and it can have a width of 100% (I don't think you need to set a specific px value as you have done) and height of 100px.
footer {
background: #555;
position: relative;
margin-top: 100px;
}
footer::before {
content: '';
position: absolute;
width: 100%;
height: 100px;
bottom: 100%;
left: 0;
display: inline-block;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
background-color: #555;
background-position: center;
background-attachment: fixed;
}
<footer>
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>
Note: I am unclear about the use of background-attachment: fixed - which doesn't seem to be completely implemented on every browser. Do you need it?

Answer 2

What you need is to target the footer.img-border::before and assign this class to your footer element in the DOM.
Actually, you don't need to set the background-image on the footer.img-border but you have to do it directly on the footer.img-border::before pseudo element.
Check my reproducible example to see the result.
I am pretty sure this is what you need for generating this pseudo element with CSS.
footer {
background: #555;
}
footer.img-border:: {
height: 100px;
width: 1920px;
background-color: #555;
background-position: center;
background-attachment: fixed;
}
footer.img-border::before {
content: "";
display: block;
width: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
height: 100px;
}
<footer class="img-border">
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>