Background Home

Kamio89 · #1 (**permalink**) 08/08/2011, 09:34

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!

juan_14nob · #2 (**permalink**) 08/08/2011, 09:50

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#div_imagen{
background:url('imagen_normal.jpg');
 
}
 
// y para que cambie..
 
#div_imagen:hover{
background:url('imagen_hover.jpg');
 
}

Saludos.

Kamio89 · #3 (**permalink**) 08/08/2011, 09:54

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

ZoroRoronoa · #4 (**permalink**) 08/08/2011, 10:04

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

con CSS:

Código CSS:

Ver originalbody {margin:0; padding:0; border:0;}
 
img#mibg {
position:relative;
width:100%;
height:100%;
z-index:1;
}

Saludos.

ArturoGallegos · #5 (**permalink**) 08/08/2011, 10:11

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<div id="bg1">contenido de tu pagina</div>

Código CSS:

Ver original#bg1{background:#000 url('imagen_normal.jpg') center center no-repeat;}
#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

Kamio89 · #6 (**permalink**) 08/08/2011, 10:28

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

ArturoGallegos · #7 (**permalink**) 08/08/2011, 10:53

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

Código CSS:

Ver originalhtml,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

Kamio89 · #8 (**permalink**) 08/08/2011, 11:03

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

ZoroRoronoa · #9 (**permalink**) 08/08/2011, 11:15

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

Código HTML:

Ver original<!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" lang="es">
<head><title>Zoro Roronoa</title>
<style type="text/css">
body {margin:0; padding:0; border:0;}
#contenedor {width:100%; height:100%; background:url('111.jpg') no-repeat center center;}
#cosas {width:500px; height:400px; margin:0 auto; background:transparent;}
body:hover>#contenedor {background:url('222.jpg') no-repeat center center;}
</style>
</head>
<body>
<div id="contenedor">
    <div id="cosas"></div>
</div>
</body>
</html>

ArturoGallegos · #10 (**permalink**) 08/08/2011, 11:24

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 originalhtml,body{margin:0;padding:0;height:100%;}
#bg1{width:100%;height:100%;background:#000 url('imagen_normal.jpg');}
#bg1:hover{background:#000 url('imagen_hover.jpg');}

ZoroRoronoa · #11 (**permalink**) 08/08/2011, 11:40

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.

Kamio89 · #12 (**permalink**) 08/08/2011, 11:45

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.

ArturoGallegos · #13 (**permalink**) 08/08/2011, 12:03

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<!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" xml:lang="es-MX" lang="es-MX">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Ag666" />
    <meta name="copyright" content="****" />
    <title>Hover Img Javascript</title>
<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
</style>
</head>
<body>
<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>
<script type="text/javascript">
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'
    }
}
</script>
</body>
</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

ZoroRoronoa · #14 (**permalink**) 08/08/2011, 12:05

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Zoro Roronoa</title>
<style type="text/css">
* {margin:0; padding:0; border:0; position:relative;}
 
img#bgimg {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<img src="111.jpg" id="bgimg" alt="fondo" />
</body>
</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

Kamio89 · #15 (**permalink**) 08/08/2011, 12:10

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?

ArturoGallegos · #16 (**permalink**) 08/08/2011, 12:32

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

Kamio89 · #17 (**permalink**) 08/08/2011, 12:38

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

gracias!

ZoroRoronoa · #18 (**permalink**) 08/08/2011, 12:50

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.

Kamio89 · #19 (**permalink**) 08/08/2011, 12:54

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

ArturoGallegos · #20 (**permalink**) 08/08/2011, 13:36

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