CODEWITHSUNDEEP
cssimagebuttonposition
Wookie
Wookie

Reputation: 43

button img not showing

Sorry for my beginner question. My image is not showing, but I do not know why. I have tried 'background-position: center;' and with 'px' values as well. The only way I can see my image if I delete 'no-repeate', but than it fills my box with hundrends of arrows. Any suggestion? I need the image only once in the center of the box.

<input id="leftBigArrow" type="button">

#leftBigArrow {
    width: 20px;
    height: 400px;
    cursor: pointer;
    border: none;
    background-image: url('images/arrow.svg') no-repeat;
    padding: 0;
}

Upvotes: 1

Views: 825

Answers (2)

biberman
biberman

Reputation: 5767

You have to define no-repeat and url('images/arrow.svg') separately with

background-image: url('images/arrow.svg');
background-repeat: no-repeat;

Or you can use the shorthand:

background: url('images/arrow.svg') no-repeat;

Working example:

#leftBigArrow {
    width: 20px;
    height: 400px;
    cursor: pointer;
    border: none;
    background-image: url('https://picsum.photos/50');
    background-repeat: no-repeat;
    padding: 0;
}
<input id="leftBigArrow" type="button">

Upvotes: 1

seagulls0125
seagulls0125

Reputation: 169

Try to add this property.

#leftBigArrow {
 background-position : center;
 background-attachment : fixed;
}

Upvotes: 2

Related Questions