Adding a decorative image separator above the footer by utilizing the ::before pseudo element

I am currently using Bootstrap version 5 and I have a simple footer in my project. However, I want to add a divider on top of it by creating extra space of 100px above the footer. You can view an example of what I want to achieve in this fiddle: https://jsfiddle.net/Ls1vhncx/5

Is there a way to accomplish the same result using the ::before pseudo-element? This would allow me to avoid adding an additional empty div element just for styling purposes.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eff0ed">[email protected]</a>/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>

csstwitter-bootstrappseudo-element

Answer №1

To create space for the border, adjust the top margin of the footer.

You can add a before pseudo element to overlap the footer with bottom 100% and width of 100%. No need for a specific pixel value. Also, set its height to 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;
}
<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: The use of background-attachment: fixed may not work on all browsers. Do you really need it?

Answer №2

For the desired effect, target the footer.img-border::before and apply this class to your footer element in the Document Object Model (DOM). It is unnecessary to set the background-image property on the footer.img-border, instead, apply it directly to the footer.img-border::before pseudo-element.

Take a look at my demonstration below to visualize the outcome.

I am confident that this solution will help you create the pseudo-element using CSS styling.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to showcase a bootstrap range slider and ensure the corresponding value is reflected in the input field?

I have implemented the bootstrap 5 range component, but I am encountering some issues Why is the dot not displaying in the center of the line even though I added the min value of 1? Is there a way to display the value of the range in the input field? How ...

htmljquerycsstwitter-bootstraprange

Positioned div in Bootstrap not displaying properly above navigation bar

My dropdown menu from the navbar is triggered by a toggle button. To indicate that it points to the trigger button, I added a triangle above the navbar-collapse. While this works well on larger screens, on mobile devices, it keeps getting pushed behind the ...

htmlcsstwitter-bootstrap

Spin background from center to edge

My goal is to create a CSS design that works seamlessly on all screen sizes. I want the background to transition from blue on the left side to white on the upper middle to the right bottom corner. Here is my current code snippet: <style> .wrapper { ...

cssbackground-colorcss-transforms

How do I resolve the issue of a non-iterable 'int' object?

1 How can I troubleshoot the error that is popping up? I believe the issue may be related to it being a dictionary. Any suggestions on how to fix this problem? views search(request): if "q" in request.GET: querystring = request.GET.get(" ...

htmlcssdjango-viewsdjango-templates

Angular 11 project facing issues with Bootstrap 5 tooltip functionality

Embracing the power of Bootstrap 5.0.2 in an Angular 11 project, I included the following code: index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compa ...

angulartwitter-bootstraptooltipbootstrap-5

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

After dabbling in Java, Visual Basic, HTML, and CSS, I'm now looking to create an interface featuring a central spinning cube with 3 fields to control its x, y, and z rotation speeds. Can you suggest which language would be the best fit for this proje ...

javahtmlcssanimationrotation

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

For a project I am working on, I am developing a simple streaming site and have organized my files into different folders. These folders include: HTML CSS Shows Within the "Shows" folder, there is a subfolder named "Testshow". I am facing an issue with ...

htmlcssdirectory

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

The text next to images is being clipped (is it CSS?)

Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...

csswordpress

Troubleshooting Bootstrap: Issues persist even after including CDN links and reference style link // Python

Currently, I'm in the process of constructing my Django app. After successfully implementing the login page and homepage, I decided to give my page a much-needed facelift since it looked extremely basic. A big fan of Bootstrap, I've used it exten ...

pythonhtmldjangotwitter-bootstrapcloud9

Achieving full content height with sticky footer

Revise I have made updates to a JSFiddle demo for users to test out. @Aspiring Aqib has offered a working solution using javascript, but CSS solutions are still encouraged. Original Request I successfully implemented a sticky footer following the guidel ...

javascriptjquerycss

Django template inheritance causing disruptions to website's design and structure

Currently utilizing django 1.3.1 to incorporate template inheritance for reducing duplicated code. Additionally, the implementation involves twitter-bootstrap v2.0. A primary html file contains the navbar, with a single {% block %} positioned beneath the ...

djangodjango-templatestwitter-bootstrap

"My attempts to link various buttons in separate Bootstrap modals to their specific content are not yielding successful results

Greetings fellow members of Stack! Please bear with me as I am a newcomer here. I am currently working on a Business website for a friend using Bootstrap3. On our team page, we have multiple members and I would like to display additional details for each ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

Creating a responsive carousel that shows a portion of the next and previous items

I am currently facing an issue with my carousel where it is not responsive for anything above mobile size. I have provided the code below: <style> .item img:first-child, .item img:last-child { display: none; } ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing carouFredsel for thumbnails and compatibility with IE7

I've successfully integrated carouFredSel (using the basic example with next/prev and pagination) on Chrome, Firefox, IE9, and IE8. However, when I tested it on IE7, the plugin didn't seem to work correctly. The list just displayed vertically wit ...

jquerycssinternet-explorer-7implementation

Tips for printing several div elements with a set width and height without altering their size

At my workplace, we have perforated paper that employees fill out and cut to use as information cards. I am working on writing code using ASP.net core to input information onto these cards after a transaction. I have created a preview of the card in an HTM ...

javascripthtmlcssasp.net-coreprinting

Customize the appearance of the datepicker on the span element

Is it possible to apply a unique style to the datepicker located within a specific span element? Currently, selecting the text box copies the style with the red font applied to it. I am looking for a way to exclusively style the datepicker enclosed withi ...

javascriptjquerycssstyles

jQuery can be used to automatically close a subnav when another subnav is opened

Currently, my code is almost perfect, but there is a slight issue with allowing multiple sub-navs to be open at the same time. I want to ensure that when one sub-nav is opened, any others automatically close. Essentially, in the jQuery code below, I need ...

htmljquerycss

Is there a way to get rid of this strange border surrounding my element?

Something strange is happening with the styling of my button. There seems to be an outline around it that I can't explain. Can anyone help me understand why this is happening? button { padding: 1em; background: transparent; border: none; } ...

htmlcss