CSS - Logo con imagen CSS no funciona - nivel novato

   
Vista:
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 24/06/2016 01:05:37
Buenas, recien entrando a este foro creo que me va a servir cuando no tenga a nadie cercano a quien preguntar, y la verdad es que casi a nadie tengo.

Mi pregunta es un tanto básica, acabo de empezar con CSS y seguramente estoy haciendo algo mal y no se que es. Busqué información en 12 páginas en google, la mayoría en inglés y no pude encontrar una solución, la mayoría mostraban como hacer el archivo CSS y lo tengo igual, otros lo hacían mediante una clase ".logo" pero tampoco me funciona, otros lo usaban dentro de un <header> pero a mi no me funciona, también traté con -webkit- y no me funciona, también decían creando una "a class" pero tampoco. Asi que usando mi lógica seguramente es tan básico mi error que nadie habla de ello, pero si me ayudan seguramente servirá a otros en el mismo nivel que yo; novatos sin nadie a quien preguntar.

Quiero crear un Logo pero quiero cargar la imagen desde mi archivo CSS donde tengo un id:

1
2
3
4
5
6
7
8
9
10
11
#logo1
{
         background: transparent url(Imagenes/Logo.jpg);
}
 
Y en mi html lo estoy invocando así:
 
<body>
<img id="logo1">
 
</body>

♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪♫♪

Ya traté creando un <a class="logo1"> /* obviamente cambiando la id "#logo1" por la clase ".logo1" y pues nada. También intenté ponerlo dentro del <header> como <h1> pero tampoco funciona.
También probé sin usar "transparent" antes de url... y nada.

Solo funciona si lo pongo directamente en el html:

<img src="Imagenes/Logo.jpg">

Pero entonces no estoy aprendiendo a usar CSS adecuadamente.

FOTO 2: La imagen de fondo me ha funcionado perfectamente con su respectivo
"background: url(ruta*);"

FOTO 3: La imagen del fondo de mi pagina ha cargado sin problemas y esta igual que la que trato de meter como logo.

FOTO 4: Se ve que tengo guardada la imagen dentro de la carpeta del html.

Solo necesito saber que estoy haciendo mal al importar la imagen desde CSS y por que no puedo verla. Tal vez queda detrás del fondo? No lo se, no he podido dar con una respuesta que me sirva.

De antemano muchas gracias
Pregunta-CSS-logo_01
Pregunta-CSS-logo_02
Pregunta-CSS-logo_03
Pregunta-CSS-logo_04
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Logo con imagen CSS no funciona - nivel novato

Publicado por DAVID (29 intervenciones) el 24/06/2016 09:26:54
Tienes que usar una capa,no un img. Algo del tipo:
1
<div class="logo"></div>

Y en el archivo css crear la clase:
1
2
3
4
5
{
    background-image: url(Imagenes/Logo.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
}

Un saludo,
David
estudio de diseño grafico
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 26/06/2016 20:29:08
Gracias por tu respuesta David, pero sigue sin funcionar, que raro no ? No entiendo por qué, no aparece nada.
Pregunta-CSS-logo_05
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Logo con imagen CSS no funciona - nivel novato

Publicado por DAVID (29 intervenciones) el 27/06/2016 09:26:20
A ver si este te funciona:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.header-shadow{
    background-image: url('Imagenes/Logo.jpg');
	width: 100%; -----------------AQUI PON TUS DIMENSIONES
	height: 160px;  -----------------AQUI PON TUS DIMENSIONES
}
</style>
<body>
<header id="masthead" class="site-header" role="banner">
      <div class="header-shadow"></div>
      <hgroup></hgroup>
      <nav role="navigation" class="site-navigation main-navigation">
      </nav><!-- .site-navigation .main-navigation -->
</header>


Un saludo,
David
soluciones web
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 28/06/2016 21:53:53
Finalmente esto me ha funcionado (ver imágenes)

Aun así no se como posicionarlo al centro, ni en ninguna parte, el atributo "position: 0 0;" o el atributo "position center center;" no están funcionando me sale siempre arriba izquerda:
Respuesta-CSS-logo_01
Respuesta-CSS-logo_02
Respuesta-CSS-logo_03
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 28/06/2016 22:23:54
Lo logré usando :

margin-left: auto;
margin-right: auto;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Logo con imagen CSS no funciona - nivel novato

Publicado por Carol Vazquez (1 intervención) el 27/06/2016 01:18:32
Hola...
oye te dejo este código y espero te pueda servir, esto es para ponerlo en la cabecera, igual podrías intentar asi

1
2
3
4
5
6
#header {
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(direccion);
  height: 188px;
}

Yo eh colocado un logo pero en la cabecera y eh usando una master page.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 28/06/2016 21:54:43
Muchas gracias, tu respuesta me fue guiando a la solución, aun asi sigo con un problema (respuesta al comentario anterior al tuyo)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Evan Hailey

Logo con imagen CSS no funciona - nivel novato

Publicado por Evan Hailey (20 intervenciones) el 27/06/2016 21:22:07
No comprendo bien eso de poner img por lo que me voy cuenta tu estas confundido, "IMG" no es un contenedor de ningun tipo, parece ser que tu necesitas conocer cuales son los contenedores html para poder maquetar bien, es por eso que no te sale lo que necesitas..

Mira puedes hacerlo con un DIV así..

1
2
3
4
5
<!-- Código HTML -->
 <div class="mycaja"></div>
 
<!-- Código Css -->
.mycaja { background; url(../images/mi_imagen.png); }

De esa manera puedes colocar una imagen con css a cualquier contenedor html, si a ti no te sale entonces chequea bien la ruta ó que no tengas algún otro css que este interfiriendo en el que tu haces.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Delirio

Logo con imagen CSS no funciona - nivel novato

Publicado por Delirio (7 intervenciones) el 28/06/2016 21:55:30
Si hubiera visto la primer respuesta de David y lo que respondí a ello, te hubieras dado cuenta que ya había pasado por esa fase. Gracias de todas formas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar