How can I set size of css-content-image?

Question

.upper-menu .search-form::after {
  content: url('../images/search.png');
  position: absolute;
  height: 10px;
  top: 5px;
  right: 22px;
}

I have pseudo-element that looks like this. I would like to change the size of the image by scaling it down 50% so that it works on high-res-screens as well. How can I do this?

try `background-size: 10px 5px;` – Mohamad Shiralizadeh Dec 03 '14 at 16:17 — Mohamad Shiralizadeh, Dec 03 '14 at 16:17

score 0 · Answer 1 · answered Dec 03 '14 at 16:12

0

You simply have to set the width and height property to 50%. This will scale it according to the browser window.

Good Luck!

answered Dec 03 '14 at 16:12

Alessandro26

19
1

Actually it will scale relative to `.search-form`, not the browser window. – George Dec 03 '14 at 16:13
actually, it would scale to exactly the dimensions specified -- ie 10px. – Todd Dec 03 '14 at 16:25

score 0 · Accepted Answer · answered Dec 03 '14 at 16:27

also, you could set the content to empty string and use a background image. Just alternatively...

.upper-menu .search-form::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  background: #bada55 url("img_2x.png") no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 5px;
  right: 22px;
}

How can I set size of css-content-image?

2 Answers2