Magento 2 adding background image before a div using css

If in any case we need to call a background image before a div this css code will be used to execute it.

Example:

calling background image before shipping address in the checkout page for showing the progress step.

Single dot before the shipping address.

It can be achieved by the following css commands:

/*main class*/
.checkout-index-index .step-title {
    padding-left: 30px;
    margin-left: -24px;
    position: relative;
}
/*main class with before tag*/
.checkout-index-index .step-title::before{
    width: 27px;
    height: 27px;
    content: " ";
    left: 0;
    position: absolute;
    background-position: left;
    background-image: url('../images/Ellipse.svg');
}

Position relative for the main class and position absolute for the before div class.
 

Leave a comment

Your email address will not be published. Required fields are marked *