CODEWITHSUNDEEP
htmlcsssvgbackground-image
sonphung.xf
sonphung.xf

Reputation: 151

Mobile browser add background to m svg

I am using this svg as background of input type="range" thump via background-image

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.33691" y="3.37695" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="3.33691" y="16.8809" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="16.6826" y="3.37695" width="3.33612" height="3.37622" fill="#695B51"/>
<rect x="16.6826" y="16.8809" width="3.33612" height="3.37622" fill="#695B51"/>
<rect width="10.0084" height="23.6334" transform="matrix(-1 0 0 1 16.6826 0)" fill="#695B51"/>
<rect width="10.0084" height="16.881" transform="matrix(-1 0 0 1 16.6826 3.37695)" fill="#F0BA15"/>
<rect y="6.75195" width="23.3528" height="10.1287" fill="#695B51"/>
<rect x="3.33691" y="6.75195" width="16.6806" height="10.1287" fill="#F0BA15"/>
</svg>

here is my css

.sliderBar::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-image: url('../../public/sliderthump.svg');
    cursor: pointer;
    background-size: cover;
    border: none;
    z-index: 9999;
  }

Every thing seems to be fine until i see that in mobile version it auto add white background to my image,

this is desktop version enter image description here

and this is mobile version enter image description here

How can i remove the white background in this case or do we have any alternative?

Upvotes: 1

Views: 169

Answers (1)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You can replace background-image: url(...) to background: url(...) then white background will remove.

body{
    background-color: #f9bcbc;
    padding: 20px;
}
.sliderBar {
    -webkit-appearance: none;
    appearance: none;
    width: 75%;
    height: 10px;
    border-radius: 10px;
    background: #fbe87b;
    outline: none;
}
.sliderBar[type=range]::-webkit-slider-thumb{
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='3.33691' y='3.37695' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='3.33691' y='16.8809' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='16.6826' y='3.37695' width='3.33612' height='3.37622' fill='%23695B51'/><rect x='16.6826' y='16.8809' width='3.33612' height='3.37622' fill='%23695B51'/><rect width='10.0084' height='23.6334' transform='matrix(-1 0 0 1 16.6826 0)' fill='%23695B51'/><rect width='10.0084' height='16.881' transform='matrix(-1 0 0 1 16.6826 3.37695)' fill='%23F0BA15'/><rect y='6.75195' width='23.3528' height='10.1287' fill='%23695B51'/><rect x='3.33691' y='6.75195' width='16.6806' height='10.1287' fill='%23F0BA15'/></svg>");
    cursor: pointer;
    background-size: cover;
    border: none;
    z-index: 9999;
}
<input type="range" class="sliderBar" value="10">

Upvotes: 1

Related Questions