How to set image width and height when we use url() in css

Question

I have implemented collapsible in my page. I want to put down arrow img rather than '+' on right side of collapsible

I can set img rahter than '+' by using url() as follows.

button.accordion:after {
    content: url("download.jpg");
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

Now, how can I set width and height of that image if I have used url() of css. Need your valuable thoughts. Thanks in advance!

Sorry, but I wont consider it as a duplicate question. I have to set image but not as a background-img.

No I am not using bootstrap here – Maddy8381 Jun 18 '19 at 09:34 — Maddy8381, Jun 18 '19 at 09:34

Sai Manoj · Accepted Answer · 2019-06-18T09:46:35.067

As you cannot set width and height for url placed in content,You can set it in the below way by using backgound-image

button.accordion:after {
content:"";
background-image: url('download.jpg');
display: inline-block;
background-size: 15px 15px;
width:10px;
height:10px
}

For better understanding go through this

div::before {
  content: url(image.jpg);
}

This is literally an image on the page like would be. It could also be a gradient. Note that you cannot change the dimensions of the image when inserted this way. You could also insert an image by using an empty string for the content, making it display: block in some way, sizing it, and using background-image. That way you could re-size it with background-size.Read more bout this in Css-Tricks

I wont get it @Sai Manoj. Can u pls explain me in ur way – Maddy8381 Jun 18 '19 at 09:42 — Maddy8381, Jun 18 '19 at 09:42
Please check my upated answer – Sai Manoj Jun 18 '19 at 09:47 — Sai Manoj, Jun 18 '19 at 09:47

How to set image width and height when we use url() in css

1 Answers1