4

I've started learning HTML/CSS but ran into a problem that has been discussed sometimes around here, but the solutions don't seem to fix my problem, so I'm wondering what I am doing wrong.

I want to use content: url() in CSS, specially because I want some images to change on :hover.

After searching for this problem, the solution mentioned here and on other threads (include :before), makes the image appear, but completely ignores the height/width set, effectively showing the image, but with its original size.

Have also tried changing it to "background-image: url ()" but the problem remains. Why aren't the height/width being accepted? I'm clueless here.

<div id="logo"></div>

CSS:

#logo {
  content: url(images/asspreto.png);
  height: 90px;
  width: 168px; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
  float: right;
  vertical-align: middle;
}

#logo:hover {
  content:url(images/assazul.png);
  cursor: pointer;
}
Community
  • 1
  • 1
Teresa
  • 43
  • 2
  • 6

3 Answers3

1

If you want an image to fit in the available space, you need to indicate so. You can do this using the background-size directive. To make it so that the image fits in the available space, but keeps its aspect ratio, use contain.

Here is an example. You can see how the image is scaled and does not fill the entire element.

#logo {
  width: 400px;
  height: 300px;
  background-image: url('https://placehold.it/500?text=500x500, but scaled');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #000;
}
<div id="logo"></div>
Just a student
  • 10,560
  • 2
  • 41
  • 69
1

Here is my interpretation: you can't change the dimensions of the media supplied to the render via content: url(). It's not mentioned in the specs though, but you can see that setting dimensions simply won't work when placing media with the help of pseudo elements.

I myself experimented a bit on this and this is what I come up with: http://codepen.io/rahul_arora/pen/GWvNgJ

You simple can't resize the media inserted using pseudo elements with height, width, object-fit, etc. It will take its space and only the overflow can help you to hide its overflowing.

If you really want to get this done with the help of pseudo elements only, an alternative way to do that is by using the image as a background.

.logo {
  position: relative;
  height: 90px;
  width: 168px;
}

.logo:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: url(https://unsplash.it/g/200/200?image=1062) 0 0 no-repeat / cover;
  height: 100%;
  width: 100%;
}

.logo:hover:after {
  background-image: url(https://unsplash.it/200/200?image=1062);
}
<div class="logo"></div>

I hope that solved it for you. Cheers!

Rahul
  • 822
  • 6
  • 12
  • 1
    Pseudo-elements, but yes, this is right. See my answer in the duplicate link that's now provided. – BoltClock Mar 14 '17 at 15:22
  • Thanks for the correction, BoltClock! I edited the answer to sound more sane and technically correct. Reading your answer now.. – Rahul Mar 14 '17 at 15:51
0

#logo:before {
  background: url("https://www.gravatar.com/avatar/732637806aee1bf98e7ef1f3658db84a?s=328&d=identicon&r=PG&f=1")no-repeat;
  height: 200px;
  width: 100%; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
  float: right;
  vertical-align: middle;
  content:"";
  height:300px;
  width:300px;
  position:absolute;
  top:0;
  left:0;
}
#logo{position:relative;}
<div id="logo"></div>
kashmira gilitwala
  • 11
  • 3