Foros del Web » Creando para Internet » CSS »

Background Home

Estas en el tema de Background Home en el foro de CSS en Foros del Web. Hola gente. Me presento, mi nombre es Guido y soy nuevo en el foro. La verdad que esta muy bueno y por eso me decidi ...
  #1 (permalink)  
Antiguo 08/08/2011, 09:34
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Background Home

Hola gente. Me presento, mi nombre es Guido y soy nuevo en el foro. La verdad que esta muy bueno y por eso me decidi a registarme. Resulta que tengo un problema con un home que estoy haciendo. Ya que tengo la imagen del home y quiero que sea vea a pantalla completa para distintas resoluciones y lo logre con un truco que me pasaron, pero se me ve demasiado grande. El otro problema es que le quiero poner un efecto hover para cuando le pases el mouse cambie de color y puedas entrar directamente a la pagina.

http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg

y este es el efecto hover que le quiero agregar

http://s2.subirimagenes.com/fondosycapturas/previo/thump_6775102homehover.jpg

Desde ya muchas gracias!
  #2 (permalink)  
Antiguo 08/08/2011, 09:50
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 1 mes
Puntos: 6
Respuesta: Background Home

pasa mas detalles, codigo , algo...

para cambiar de una imagen a otra usando css, se hace de la siguiente forma:

Código CSS:
Ver original
  1. #div_imagen{
  2. background:url('imagen_normal.jpg');
  3.  
  4. }
  5.  
  6. // y para que cambie..
  7.  
  8. #div_imagen:hover{
  9. background:url('imagen_hover.jpg');
  10.  
  11. }


Saludos.
  #3 (permalink)  
Antiguo 08/08/2011, 09:54
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

El efecto hover lo entiendo.. Lo que pasa es que yo tengo esa imagen y esta a una resolucion de 1024x768 pero si la veo en un monitor de 1360x768 se me ve todo el resto blanco, y yo quiero que se adapte a la resolucion del monitor.

Eso lo habia logrado usando esto que encontre por ahi


html


Código:
<div id="background">
<span class="activeslide">
<img src="http://www.malargue.gov.ar/templates/malargue/images/home5.jpg">
</span>
</div>


Css


Código:
#background img, #background a {
    display: none;
    height: 100%;
    width: 100%;
}
#background .activeslide, #background .activeslide img {
    display: inline;
}
#background {
    z-index: 1;
}
Pero lo que pasa es que se me ve demasiado grande y no se como aplicarle el efecto hover ahi.

Otra cosa que encontre fue esta.

http://jorgebernal.es/2010/05/27/como-usar-una-imagen-de-fondo-que-se-adapte-a-la-pantalla/

Pero me queda cortada :S
  #4 (permalink)  
Antiguo 08/08/2011, 10:04
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 2 meses
Puntos: 116
Respuesta: Background Home

despues del <body> pon tu imagen
<img id="mibg" src="tuimage.jpg" alt="bg"/>

con CSS:
Código CSS:
Ver original
  1. body {margin:0; padding:0; border:0;}
  2.  
  3. img#mibg {
  4. position:relative;
  5. width:100%;
  6. height:100%;
  7. z-index:1;
  8. }

Saludos.
__________________
Programador jQuery & PHP
  #5 (permalink)  
Antiguo 08/08/2011, 10:11
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

si mi vista no me falla a las orillas de tu imagen tienes color negro

si no necesitas que toda esa imagen sea un link una forma de solventar tu problema seria utilizar por ejemplo

Código HTML:
Ver original
  1. <div id="bg1">contenido de tu pagina</div>

Código CSS:
Ver original
  1. #bg1{background:#000 url('imagen_normal.jpg') center center no-repeat;}
  2. #bg1:hover{background:#000 url('imagen_hover.jpg') center center no-repeat;}

#000 -> color de fondo para los espacios donde no exista imagen
url('imagen_normal.jpg') -> imagen que deseas pones
center center -> posision horizontal y vertical de la imagen
no-repeat -> hacer que no se repita para que no se vea mal
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 08/08/2011, 10:28
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

De la forma que me dijo Ag666 no me sirvio...

En cambio en la forma que me dijo ZoroRoronoa me sirvio pero me sigue pasando el mismo problema que antes... se me muy grande y tengo que usar las barras de desplazamiento vertical y no puedo ponerle el efecto hover
  #7 (permalink)  
Antiguo 08/08/2011, 10:53
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

quiero asumir que si has colocado la imagen inmediatamente después del body, has colocado en tu css

Código CSS:
Ver original
  1. html,body{margin:0;padding:0;height:100%;}

e indudablemente has declarado un doctype valido... de ser así has favor de mostrar tu código o tu sitio para poder revisar
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 08/08/2011, 11:03
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

sisi lo hice asi. pero no me sale :S

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
	margin:0;
	padding:0;
	height:100%;}

    #bg1{background:#000709 url(imagenes/home.jpg) center center no-repeat;}
    #bg1:hover{background:#000709 url(imagenes/home_hover.jpg) center center no-repeat;}


</style>



</head>

<body>
    <div id="bg1">contenido de tu pagina</div>


</body>
</html>
a ver si encotnras algun error
  #9 (permalink)  
Antiguo 08/08/2011, 11:15
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 2 meses
Puntos: 116
Respuesta: Background Home

No te entiendo al 100%, aca el efectp hover del background, pero no al 100%

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es">
  4. <head><title>Zoro Roronoa</title>
  5. <style type="text/css">
  6. body {margin:0; padding:0; border:0;}
  7. #contenedor {width:100%; height:100%; background:url('111.jpg') no-repeat center center;}
  8. #cosas {width:500px; height:400px; margin:0 auto; background:transparent;}
  9. body:hover>#contenedor {background:url('222.jpg') no-repeat center center;}
  10. </head>
  11. <div id="contenedor">
  12.     <div id="cosas"></div>
  13. </div>
  14. </body>
  15. </html>
__________________
Programador jQuery & PHP
  #10 (permalink)  
Antiguo 08/08/2011, 11:24
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

mmmm pensé que lo habías echo con el método de @ZoroRoronoa

pero igual veo que yo debí ser mas claro e incluir todos los estilos esenciales para que te funcionara, prueba cambiar tu css por

Código CSS:
Ver original
  1. html,body{margin:0;padding:0;height:100%;}
  2. #bg1{width:100%;height:100%;background:#000 url('imagen_normal.jpg');}
  3. #bg1:hover{background:#000 url('imagen_hover.jpg');}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 08/08/2011, 11:40
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 2 meses
Puntos: 116
Respuesta: Background Home

lo que he estado notando es como si la imagen guardara su proporcion, es decir, se incrementa al ancho hasta el 100%
y en lo alto incrementa mas (ya que es mas ancho que alto), entonces por eso se pasa la altura y sale el scroll vertical.
__________________
Programador jQuery & PHP
  #12 (permalink)  
Antiguo 08/08/2011, 11:45
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

Bueno, el de zorororona me corta la altura y no se ve a pantalla completa.
El de Ag666 esta bien la altura pero no usa el 100% del ancho del navegador.

Osea... lo que necesito es que el fondo ese que les pase use el 100 % de la altura y el ancho del navegador con el cual se esta visualizando, y a la vez que sea linkeable con un efecto hover.
  #13 (permalink)  
Antiguo 08/08/2011, 12:03
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

después de darle varias vueltas creo que nos perdimos...

veamos el método que yo te di con el div y la imagen de fondo esta jamas cubrirá el 100% de alto ni ancho salvo que la pantalla o navegador sea de un tamaño inferior, inclusive en pantallas muy pequeñas parte de la imagen se perderá en las orillas.

con el método de @ZoroRoronoa puedes hacer que la imagen tome 100% de alto y ancho esta se deformara según las necesidades pero no tienes la facilidad de hacer que cambie la imagen con el hover

mi solución es usar javascript un ejemplo practico y funcional es este

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-MX" lang="es-MX">
  3.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  4.     <meta name="author" content="Ag666" />
  5.     <meta name="copyright" content="****" />
  6.     <title>Hover Img Javascript</title>
  7. <style type="text/css">
  8. html,body{margin:0;padding:0;height:100%;}
  9. </head>
  10. <a href="index.html" title="Pagina intro"><img id="BgIntro" style="width:100%;height:100%;" src="http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg" alt="Pagina intro" onmouseover="overimg();" onmouseout="overimg();" /></a>
  11. <script type="text/javascript">
  12. function overimg(){
  13.     var Intro = document.getElementById('BgIntro');
  14.     if(Intro.src == 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'){
  15.         Intro.src = 'http://s2.subirimagenes.com/fondosycapturas/previo/thump_6775102homehover.jpg'
  16.     }
  17.     else{
  18.         Intro.src = 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'
  19.     }
  20. }
  21. </body>
  22. </html>

has copy - paste en un documento nuevo y ábrelo en tu navegador, notese que la imagen se deforma si haces mas angosto el navegador, pero como tu deseas siempre cubrirá el 100% ancho y alto
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #14 (permalink)  
Antiguo 08/08/2011, 12:05
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 2 meses
Puntos: 116
Respuesta: Background Home

Buen ya siendo claros para darte una solucion final.

Este codigo te permitira poner la imagen de fondo al 100% como lo quieres
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Zoro Roronoa</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0; border:0; position:relative;}
  6.  
  7. img#bgimg {
  8. width:100%;
  9. height:100%;
  10. position:fixed;
  11. top:0;
  12. left:0;
  13. }
  14. </head>
  15. <img src="111.jpg" id="bgimg" alt="fondo" />
  16. </body>
  17. </html>

Para hacer el efecto hover, necesitamos cambiar el valor del atributo src="" por la ruta de la otra imagen, entonces este efecto hover no se puede lograr con CSS, asi que se necesitara javascript :)

Saludos.

PD: me ganaste en post Ag666
__________________
Programador jQuery & PHP
  #15 (permalink)  
Antiguo 08/08/2011, 12:10
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

bueno, esa es la idea , pero se pixela demasiado... yo viendo esto

html

Código:
<div id="background">
<span class="activeslide">
<img src="http://www.malargue.gov.ar/templates/malargue/images/home5.jpg">
</span>
</div>

Css

Código:
#background img, #background a {
    display: none;
    height: 100%;
    width: 100%;
}
#background .activeslide, #background .activeslide img {
    display: inline;
}
#background {
    z-index: 1;
}
llegue a ver que se podia agrandar facilmente sin pixelarse pero quedaba demasiado grande y tenia que usar las barras de desplazamiento

hay alguna forma de hacer lo que vos hiciste pero que no pierda calidad la imagen?
  #16 (permalink)  
Antiguo 08/08/2011, 12:32
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

que esperabas que no se pixeleara?

viste el tamaño original de las fotos que pusiste aquí? jeje son de 200px obviamente se van a pixelear, quiero suponer tu tienes las originales... simplemente exportalas en un tamaño de 1200 y veras que no se piexelea tanto... pero eso si siempre se va a deformar puesto que quieres cubra 100% ancho y alto
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #17 (permalink)  
Antiguo 08/08/2011, 12:38
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

puse de 200px? las originales son de 1024x768 ejeje que raro, bueno voy a probar

gracias!
  #18 (permalink)  
Antiguo 08/08/2011, 12:50
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 2 meses
Puntos: 116
Respuesta: Background Home

si, las imagenes que subistes estaban a 200px aprox.
Ademas pixeladas o no, es algo que debiste tenerlo en cuenta, al deformarse la imagen, cualquiera de va a pixelar, ovbiamente entre no sea tan grande el cambio no se pixelara mucho.
__________________
Programador jQuery & PHP
  #19 (permalink)  
Antiguo 08/08/2011, 12:54
 
Fecha de Ingreso: agosto-2011
Mensajes: 8
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Background Home

ultima pregunta

Código:
function overimg(){
    var Intro = document.getElementById('BgIntro');
    if(Intro.src = 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'){
        Intro.src = 'http://s2.subirimagenes.com/fondosycapturas/previo/thump_6775102homehover.jpg'
    }
    else{
        Intro.src = 'http://s3.subirimagenes.com:81/fondosycapturas/previo/thump_6775110home.jpg'
    }
no me reconoce en intro.src para cargar una imagen desde mi disco rigido ... si tengo una carpeta con el index y otra carpeta llamada imagenes con las imagenes..
tendria que poner 'imagenes/home.jpg' pero no me la reconoce :S
  #20 (permalink)  
Antiguo 08/08/2011, 13:36
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Background Home

mientras las imágenes sean accesibles desde el navegador no importa donde las tengas

lo que si influye es que tengas la ID correctamente, y si en <img src="***" usar url absolutas en el java usa absolutas y usas relativas igual en java para que coincidan y pueda hacer el cambio
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: fondo, home, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:46.