How to change the size of an image inserted with the ::before pseudo-element in CSS?
here is my code
.smile::before {
content: url(../../../../Pictures/Smilie.jpg);
height: 100px;
width: 100px;
}
What am I missing?
Asked
Active
Viewed 4,474 times
2
Super User
- 9,448
- 3
- 31
- 47
Pall Arpad
- 1,625
- 16
- 20
-
1your question is not clear, what you need exactly – Jishnu V S Jan 11 '17 at 07:09
-
Change the size of the inserted image with CSS "::before" pseudo-element. – Pall Arpad Jan 11 '17 at 07:19
-
On my code the "height and the width" property is not working but apparently it cannot be sized this way. – Pall Arpad Jan 11 '17 at 07:20
2 Answers
4
Hi why dont you add your image as a background image and add the following
.smile::before{
content: ' ';
background-image: url(../../../../Pictures/Smilie.jpg);
background-size:contain;
height: 100px;
width: 100px;
}
-
i couldnt get it to work until i inserted "background-size: contain" - thanks so much! – AlphaX Feb 11 '19 at 13:57
3
A good solution to your question is that you have to use your image as a background.
.smile::before{
content: ' ';
background: url(../../../../Pictures/Smilie.jpg);
background-size:contain;
height: 100px;
width: 100px;
display: inline-block;
}
Mihaly KR
- 2,363
- 2
- 19
- 20
-
-
1I finally figured out that it the "content" itself has to be "display:inline-block" because only "block" element can have their proper size! – Pall Arpad Jan 14 '17 at 07:42
-
1
-
2.smile::before{ content: ' '; display:inline-block; background: url(../../../../Pictures/Smilie.jpg); background-size:contain; height: 100px; width: 100px; } – Pall Arpad Jan 14 '17 at 07:43
-