Fondo estático

efrencitopool · #1 (**permalink**) 07/12/2011, 02:29

Hola, no estoy muy seguro como definir a esto.. yo lo llamo fondo "estático" pero supongo que puedo estar equivocado.

Lo que quiero hacer es lo siguiente:

Cuando baje con el ratón para ver el contenido, que el fondo de las "cortinas" bajen también, como el siguiente ejemplo..

http://www.marianastrench.net/

¿alguien sabe como puedo hacer?

Gracias por todo!
Saludos ~~

enaguimar · #2 (**permalink**) 07/12/2011, 04:02

Si, haber te pongo de ejemplo la web esa ok.
1º si te figas los dos laterares de las cortinas es una imagen de fondo, jpg
2º la parte superior es una imagen png, no tiene fondo.La cual puedes poder con css en la position:absolute;
3º en la parte centro hay un div nav de wicht y height definidos con scroll no visible, dentro dos div: div botones de inicio definido con wicht y height, y div contenedor wicht definido y height en auto, donde se habre la info.

Es un poco lioso la verda, si necesitas ayuda mandame yn privado y lo vemos.

Hurieta · #3 (**permalink**) 07/12/2011, 12:47

Código:

CSS

body{background-position:fixed; background-image:url(localizacion de la imagen);}

Espero que te sirva ;)

nicooq22 · #4 (**permalink**) 07/12/2011, 19:37

eso no es un fondo son otros divs con en el css puesto position:fixed;
esto hace que lo que hayas puesto quede siempre visible estilo la barra de Twitter!
Espero ayudarte!

efrencitopool · #5 (**permalink**) 08/12/2011, 08:29

Ante todo, gracias por vuestras respuestas..

Decir que no hay manera, no me sale y tengo el código:

Cita:

<!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>Ejercicio 1</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div id="estructura">

<div id="menu">
<ul>
<li><a href="#1" title="Link 1">Home</a></li>
<li><a href="#2" title="Link 2">Eventos</a></li>
<li><a href="#3" title="Link 3">Dardos</a></li>
<li><a href="#4" title="Link 4">Galería</a></li>
<li><a href="#5" title="Link 5">Contacto</a></li>
</ul>
</div>

</div>
<div id="bar">
<img src="rubens.jpg" width="660" height="438"/>
<p><img src="facebook.jpg"/></p>

<p>Razones para visitarnos:</p>

<p>Un pub en estilo europeo con un ambiente cálido, amistoso y divertido. Ofrece todo tipo de bebida, cervezas, refrescos, zumos, etc.</p>

<p>Ideal para tomar algo y charlar con amigos mientras se escucha la mejor musica.</p>

<p>También tenemos una mesa de billar y dardos, para divertirte con tus amigos y con nosotros.</p>

<p>¡¡No hay excusa para no presentarte y divertirte con nosotros!!</p>
</div>

</body>
</html>

EL CSS <--

Cita:

div#estructura {
padding: 50px;
}

div#menu {
list-style:none;
margin:0;
padding:0;
}
div#menu li {
margin:5px;
padding:0;
float: left;
}

#menu ul{
list-style-type: none;
margin: 0 auto;
width: 600px
}

div#menu li a {
display:block;
width:100px;
padding:8px 0;
text-decoration:none;
text-align:center;
font-size:15px;
color:#FFFFFF;
background-color: #F30;
}

div#menu li a:hover {
color:#99CC00;
background-color:#003366;
}

body {
background-position:fixed;
background-image:url('fondo1.JPG');
}

div#bar {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
color: #FFF;
}

Saludos y gracias! :)

snowmanchip · #6 (**permalink**) 08/12/2011, 09:24

Prueba así:

Código CSS:

Ver originalbody {
background-attachment:fixed;
background-repeat:no-repeat;
background-image:url('fondo1.JPG');
}

Saludos

efrencitopool · #7 (**permalink**) 08/12/2011, 10:10

Me sale de la siguiente manera.. :(

Saludos y gracias! ~~

dleal100 · #8 (**permalink**) 08/12/2011, 10:11

Código:

body {
background-image:url(imagenes/130.jpg);
background-position:top center;
background-attachment:fixed;
}

snowmanchip · #9 (**permalink**) 08/12/2011, 10:28

Acabo de probar el código que te envié con esa imagen de fondo más el código que pusiste y funciona perfecto...me puedes enviar tu css y xhtml para darle una vuelta? debe ser un detalle..
Saludos

efrencitopool · #10 (**permalink**) 08/12/2011, 12:58

Ya está arreglado, ¡¡gracias a todos!! Y en especial a snowmanchip, que al final me ha solucionado el problema :)

Cita:

body {
background-attachment:fixed;
background-repeat:no-repeat;
background-image:url('fondo1.JPG');
margin:0 auto;
background-position:center;
}

¡¡Saludos a todos y un abrazo muy fuerte!! :)