Home / Questions / 298155
Accepted
Fernanda
Asked: 2020-10-04 05:23:06 +0800 CST 2020-10-04 05:23:06 +0800 CST

resize image of a "content" in css

  • 772

I have a div to which I assign an image using :after (which will change with an event) the problem is that it doesn't take the size I want to assign it... It has to enter the black square. It is the first time that I use :after with images, with texts it had not happened to me... I pass code so that they can see if they can guide me

nav {
  display: inline-block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: auto;
  text-align: right;
  z-index: 100;
  top: 50px;
}

nav div#cerrar:after {
  content: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  position: absolute;
  bottom: 0px;
  right: 100px;
  width: 20px;
  height: 20px;
}

nav a {
  text-decoration: none;
  color: #000;
  padding: 10px 10px 10px 0;
  display: block;
}

nav #cerrar {
  position: absolute;
  background: #000;
  width: 40px;
  height: 50px;
  right: 100px;
  bottom: -40px;
  border-radius: 0 0 5px 5px;
}
<nav>
  <a href="#contacto">CONTACTANOS</a>
  <div id="cerrar" class=""></div>
</nav>

html5

1 Answers

  1. Best Answer

    As you are doing it you could not, but there is a workaround using the image backgroundto be able to do it.

    nav {
  display: inline-block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: auto;
  text-align: right;
  z-index: 100;
  top: 50px;
}

nav div#cerrar:after {
  background-image: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  background-size: 40px 50px;
  display: inline-block;
  width: 40px; 
  height: 50px;
  content:"";
}

nav a {
  text-decoration: none;
  color: #000;
  padding: 10px 10px 10px 0;
  display: block;
}

nav #cerrar {
  position: absolute;
  background: #000;
  width: 40px;
  height: 50px;
  right: 100px;
  bottom: -40px;
  border-radius: 0 0 5px 5px;
}
    <nav>
  <a href="#contacto">CONTACTANOS</a>
  <div id="cerrar" class=""></div>
</nav>

    • 4