Logo sobre parte inferior derecha de la pantalla

matiaslawwliet · #1 (**permalink**) 18/12/2012, 08:23

Hola. Necesito si alguien puede ayudarme. Estoy haciendo una nueva web y no sé como colocar una imagen (logo pequeño) sobre el margen inferior derecho del fondo con css. Es decir, mi fondo es totalmente negro. Pero encima de él, kiero colocar una foto miniatura en la esquina inferior derecha sobre todas las páginas internas de la web. Creo que ahí se entendió mejor. Si alguien pudiera ayudarme se los agradecería.

Por si necesitan, mi web es esta:

http://infectorweb.host56.com/inicio.html

y el css que tengo es este:

Código CSS:

Ver originalbody { 
background-color: #000000}
background-attachment: fixed;
background-position: center center;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: center bottom;
background-size: 100% auto;
margin: 0 0 0;
min-height: 200px;
}

Y una duda más. Si el invitado de la página tiene distintas resoluciones hay manera de ajustar ese logo?
Desde ya, muchas gracias.

javierflti · #2 (**permalink**) 18/12/2012, 10:57

Lo tienes que poner así
.logo {
position:absolute;
bottom:15px;
right:15px;
}

Y en tu web un div con logo, con eso debería ajustarlo siempre a la esquina derecha(con unos píxeles de margen) tengan la resolución que tengan.

Dime si te funciona

BloodShadow · #3 (**permalink**) 18/12/2012, 11:59

mas sencillo y seguro sin problema con los navegadores:

Código CSS:

Ver originalbody{ background: url(ruta/laimagendefondo.jpg) no-repeat bottom right; }

matiaslawwliet · #4 (**permalink**) 18/12/2012, 12:45

Ninguno de los dos me funcionó. El primero con div me lo dejo así:

Y el segundo me coloco en logo justo donde lo quería pero me ha borrado el resto del fondo:

BloodShadow · #5 (**permalink**) 18/12/2012, 15:23

al body dejale el fondo q kieras, con color solido o no se como lo quieres, luego create un div contenedor de todooooooo el sitio que crezca con el sitio y todo; entonces a ese colocale el logo que quieres abajo, ejemplo:

Código HTML:

Ver original<body>
   <div id="container"></div>
</body>

Código CSS:

Ver originalbody{ background: url(imagen-que-se-repetira.jpg) repeat-x 0px 0px; }
 
#container{ background: url(logo.jpg) no-repeat right bottom; }

matiaslawwliet · #6 (**permalink**) 18/12/2012, 15:52

Gracias BloodShadow, ese código me funciono perfecto. Era tan simple y yo queriendome complicar XD.

pzin · #7 (**permalink**) 18/12/2012, 18:28

Cita:

Iniciado por matiaslawwliet

Y el segundo me coloco en logo justo donde lo quería pero me ha borrado el resto del fondo:

Normal, ya que no especificaste ningún color de fondo. Así debería funcionarte:

Código CSS:

Ver originalbody {
  background: #000000 url(ruta/laimagendefondo.jpg) no-repeat bottom right;
}

No obstante, en vez de hacer varias pirulas con CSS pueden usarse varios fondos en un sólo elemento:

Código CSS:

Ver originaldiv#algo {
  background: url(algo.gif) right bottom no-repeat,
              url(algo_mas.gif) 10px 10px repeat;
}

Pero bueno, este no es tu caso ya que sólo andas con un único fondo.

De paso puedes pasarte por http://librosweb.es que tienen buenos manuales sobre CSS.

matiaslawwliet · #8 (**permalink**) 19/12/2012, 07:38

Karma probe el codigo

Código CSS:

Ver originalbody {
  background: #000000 url(ruta/laimagendefondo.jpg) no-repeat bottom right;
}

sin embargo no me funcionó, lo cual no me extraña porq al remodelar alguno se olvida de codigos y sin darse cuenta a veces quedan dando vuelta por la web y afectan en algun u otro sentido al normal funcionamiento. De todos modos gracias por eso y por los manuales de CSS me han kitado ya un par de dudas y el otro codigo que si bien no me sirve actualmente seguramente lo usaré en un futuro no muy lejano y es bueno saberlo.
Gracias por todo nuevamente.