CODEWITHSUNDEEP
htmlcssbackground-image
Leon Gaban
Leon Gaban

Reputation: 39034

How to get background img to show up in :after selector?

So I love the Corner Indicator animation found here: http://tympanus.net/Development/CreativeLoadingEffects/

Currently there is a CSS animation playing inside of the :after selector.
I downloaded the file and tried to backwards engineer it below, basically instead of a CSS animation I want this animated gif to play inside of the corner triangle:

My demo: http://leongaban.com/_stack/after/

jsFiddle: http://jsfiddle.net/leongaban/vzmPm/3/

Note: the spinning image above the button is what I'm trying to get to show up inside of the corner triangle when you click the button.

Would you know how to get a background image to show up in an :after div?

enter image description here

/* Loading circle idea from http://codepen.io/Metty/details/lgJck */
.la-anim-10::before,
.la-anim-10::after {
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    position: absolute;
    display: block;
}

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: #bb344f;
    border-left-color: #bb344f;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;
}

.la-anim-10::after {
    width: 77px;
    height: 77px;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
}

Upvotes: 2

Views: 191

Answers (3)

service-paradis
service-paradis

Reputation: 3398

you lose your image far away up the corner. It is caused by the rotation. In fact, this rotation also cause your animated image to be rotated.

Instead of rotated square arranged to look like a triangle, i simulate a triangle using borders. This way, no need to use rotation.

border-style: solid;
border-width: 0 150px 150px 0;
border-color: transparent #f58733 transparent transparent;

I set up the image in the :after selector and adjusted your translation correctly for the triangle.

You now have a nice triangle having your animated image inside right in the corner without losing your animation effect.

Some adjustements still needed but i think this jsfiddle will help you out.

Upvotes: 1

Cheejyg
Cheejyg

Reputation: 356

Something like this?

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    /*border-right-color: #bb344f;
    border-left-color: #bb344f;*/
    background: url('http://leongaban.com/_stack/after/img/loader-logo.gif') no-repeat center;
    border:none;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;

}

Upvotes: 1

fred02138
fred02138

Reputation: 3361

I think what you're looking for is the content property, something like:

#test:after {
    content: url('../img/loader-logo.gif');
}

Then you can remove the background image.

Upvotes: 1

Related Questions