How do I resize an image that's located INSIDE my CSS?

user_19361338 0
Viewed 29

How do I resize the image? I have tried using properties like height, width, etc, but this does not work. I can't seem to resize it if I pull it from inside the CSS

.project p::before {
    content:url('logo.png');
    position:relative; /* or absolute */
}
resize size css image
2 Answers

By default, pseudo-elements such as ::before have a display of inline, so size properties such as width and height do not apply to them. To correct this, you will need to set it to display: inline-block or display: block.

In addition to this, instead of using content to load the URL, you'll need to set content to an empty value and make use of background (or background-image) for the image itself.

This can be seen in the following:

.project p::before {
  background-image: url('http://placekitten.com/100/100');
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  content: ''; /* Required */
}
<div class="project">
  <p></p>
</div>

user_23416030

Make the content blank and put the image as the background. Then you can set the width and height of the pseudo element and manipulate the picture with background properties like size or position. More here https://www.w3schools.com/cssref/pr_background-position.asp

.project p::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background-img: url("some url here");
    background-origin: center;
    background-size: cover;
}
user_109372790
Related