Avatar circular con HTML y css ayuda

Archivado
Antes de nada decir que estoy aprendiendo. Llevo ya unas cuantas horas de HTML y CSS pero todavía hay cosas que se me resisten.
El caso es que me estoy haciendo un portafolios y en la parte superior Quiero poner mi foto en cirulo con mi nombre abajo.

Bien hago lo siguiente.
HTML

<div class="avatar"></div>
<p class=""><b>"Aqui mi nombre."</b></p>

CSS
.avatar {
border: 1px outset black;
border-radius: 100%;
width: 80px;
height: 80px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url('img/avatar.jpg')

Lo que quiero es que la foto quede de fondo dentro del div y asi salga en forma de circulo. Bien, todo sale bien pero la foto no sale [snif] [snif] .

Luego el borde del curculo no se hacer para que sea salido y de color negro. Lo intente con "solid" pero nada [+risas] .

Alguien que me pueda ayudar?
Revisa que la imagen que estas cargando está en esa ubicación.
Tienes que darle a la imagen el mismo tamaño que al circulo.

Sobre lo del borde, ni idea, a mi me va bien tanto ouset como solid

https://jsfiddle.net/j8pkm0hz/
Gracias por contestar. Se ve que el borde lo estaba escribiendo mal y por eso no salia [+risas] [+risas] .

A lo de la imagen. Solo puedo cargar imagenes que esten en la red,si pongo una que tengo en el ordenador
background-image: url("direcion") si me va.
No entiendo porque si pongo la carpeta de mis imagenes no me carga
Si ya lo tenías casi todo montado, solo te dí un empujoncito (que a menudo necesitamos xD)

Piensa que estás escribiendo en el archivo CSS, por tanto la ruta relativa será desde ahí.
Osea, tal y como lo estás especificando, se supone que donde está ese archivo .css, en el mismo sitio hay una carpeta llamada 'img' y dentro un archivo 'avatar.jpg'
alvaro101 escribió:Si ya lo tenías casi todo montado, solo te dí un empujoncito (que a menudo necesitamos xD)

Piensa que estás escribiendo en CSS, por tanto la ruta relativa será desde ahí.
Osea, tal y como lo estás especificando, se supone que donde está ese archivo .css, hay una carpeta llamada 'img' y dentro un archivo 'avatar.jpg'



Imagen
MATAME.
.
..
... No es la primera vez que tengo ese fallo. [facepalm] te juro que este tipo de errores lo tengo a menudo, cuando me entero me dan ganas de tirarme por la ventana.
background-image: url("../img/avatar.png");

gracias [+risas]
no te preocupes jeje, suele pasar, picando código hay que estar pendiente de mil cosas...

por cierto, repasando lo que te dije, también puedes usar:
background-size: 100%;
creo que estaría mejor, de cara a cambiar algo en un futuro, tendrías que cambiar solo las medidas del elemento en sí, y el background ya se adapta.
alvaro101 escribió:
usar:
background-size: 100%;
creo que estaría mejor, de cara a cambiar algo en un futuro, tendrías que cambiar solo las medidas del elemento en sí, y el background ya se adapta.


[oki] [oki] lo haré así, gracias.
6 respuestas
Archivado
Volver a General