Cómo agregar una imagen utilizando CSS

sebasxnco · 1 Nov 2010

hola forobeta alguien me podria decir como hago para agregar una imagne desde el css

por ejemplo

HTML:

span.android {background:url(img/so/android.png);}

pero cuando llamo el estilo no aparece la imagen

Krauzer · 1 Nov 2010

Debes crear una clase en el Css, de esta manera:

Insertar CODE, HTML o PHP:

div.imagenconcss{
	background: url(images/imagencss.jpg) no-repeat 0% 0%;
	background-color: #000;
	line-height: 1.4em;
	margin: 25px 0 25px 15px;
	padding: 50px 8px 5px 20px;
	text-decoration: none;
}

Y luego hacer la llamada con div class="imagenconcss" y eso es todo

Puko · 29 May 2023

Ocupas que tenga width y height y para eso ocupa display: block

<span class="android"></span>

span.android {
background-size: 100% 100%;
width: 160px;
height: 225px;
display: block;
background-repeat: no-repeat;
background-image: url(img/so/android.png);
}

Crom Studio · 21 Jun 2023

Para agregar una imagen utilizando CSS, necesitas asegurarte de que la ruta de la imagen sea correcta y esté accesible desde el archivo CSS. Aquí tienes un ejemplo de cómo hacerlo:

1. Asegúrate de que la ruta de la imagen sea correcta y relativa a la ubicación del archivo CSS. Por ejemplo, si la imagen está en una carpeta llamada "img" que está en el mismo nivel que tu archivo CSS, la ruta sería "../img/so/android.png". Si la imagen está en la misma carpeta que tu archivo CSS, la ruta sería "android.png".

2. En tu archivo CSS, puedes agregar la imagen utilizando la propiedad background-image. Aquí tienes un ejemplo:

CSS:

span.android {
  background-image: url('../img/so/android.png');
  /* Ajusta los estilos adicionales según tus necesidades */
  width: 100px;
  height: 100px;
}

3. Asegúrate de que el selector CSS (span.android en tu ejemplo) coincida con el elemento HTML al que deseas aplicar el estilo.

Recuerda verificar la ruta de la imagen y los estilos adicionales que desees aplicar al elemento. Además, asegúrate de que los archivos CSS y la imagen estén ubicados correctamente y sean accesibles desde el archivo CSS.

Puko · 21 Jun 2023

Crom Studio dijo:
CSS:

span.android { background-image: url('../img/so/android.png'); /* Ajusta los estilos adicionales según tus necesidades */ width: 100px; height: 100px; }

Recuerda verificar la ruta de la imagen y los estilos adicionales que desees aplicar al elemento. Además, asegúrate de que los archivos CSS y la imagen estén ubicados correctamente y sean accesibles desde el archivo CSS.

Si no tiene display: block; no se ve ...

Si se lo pones ya se ve...

Previo...

No todo es nomas irle a preguntar a la IA y ya va ser lo correcto

Ferreiro · 22 Jun 2023

Crom Studio dijo:
Para agregar una imagen utilizando CSS, necesitas asegurarte de que la ruta de la imagen sea correcta y esté accesible desde el archivo CSS. Aquí tienes un ejemplo de cómo hacerlo:

1. Asegúrate de que la ruta de la imagen sea correcta y relativa a la ubicación del archivo CSS. Por ejemplo, si la imagen está en una carpeta llamada "img" que está en el mismo nivel que tu archivo CSS, la ruta sería "../img/so/android.png". Si la imagen está en la misma carpeta que tu archivo CSS, la ruta sería "android.png".

2. En tu archivo CSS, puedes agregar la imagen utilizando la propiedad background-image. Aquí tienes un ejemplo:

CSS:

span.android { background-image: url('../img/so/android.png'); /* Ajusta los estilos adicionales según tus necesidades */ width: 100px; height: 100px; }

3. Asegúrate de que el selector CSS (span.android en tu ejemplo) coincida con el elemento HTML al que deseas aplicar el estilo.

Recuerda verificar la ruta de la imagen y los estilos adicionales que desees aplicar al elemento. Además, asegúrate de que los archivos CSS y la imagen estén ubicados correctamente y sean accesibles desde el archivo CSS.

Este mensaje es tuyo realmente o es de una IA? Es que se ve no se, jajja tan bien explicado y detallado. Hmm...

Cómo agregar una imagen utilizando CSS

sebasxnco Seguir

Krauzer

Puko

Crom Studio

Puko

Ferreiro