CODEWITHSUNDEEP
htmlcssanchor
JG20
JG20

Reputation: 13

Image not carrying over from CSS

I'm attempting to set up an anchor tag to scroll from bottom to top of the page, and the functionality works fine - but the arrow icon I want to display isn't showing up from the linked CSS.

HTML

<a href="#" class="anchorScroll" style=""></a>

CSS

/*Anchor to move to top*/

.anchorScroll {
    content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
    background: #8994a5;
    color: #fff;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 3px;
}

And here is a JS Fiddle link. Thanks in advance for any help that anyone can offer.

Upvotes: 1

Views: 51

Answers (2)

slon
slon

Reputation: 1030

You have change this: 

content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);

to this:

background:url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');

Changed "content" to "background", put the link to quotations, and removed 200x200.

Full code is here:

.anchorScroll {
        background:#8994a5 url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
        color: #fff;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 9999;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        border-radius: 3px;
    }

Upvotes: 1

Ezzuddin
Ezzuddin

Reputation: 665

You need to remove 200x200 from content url link see below

.anchorScroll {
    content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg);
    background: #8994a5;
    color: #fff;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 3px;
}
<a href="#" class="anchorScroll" style=""></a>

Upvotes: 0

Related Questions