Foros del Web » Creando para Internet » CSS »

Fondo estático

Estas en el tema de Fondo estático en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/12/2011, 02:29
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 12 años, 11 meses
Puntos: 0
Fondo estático

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 ~~
  #2 (permalink)  
Antiguo 07/12/2011, 04:02
Avatar de enaguimar  
Fecha de Ingreso: diciembre-2011
Ubicación: Algeciras, Spain, Spain
Mensajes: 214
Antigüedad: 12 años, 11 meses
Puntos: 40
Respuesta: Fondo estático

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.
__________________
Descargar Paradise Bay - Descargar Play Store gratis
@Vredweb
  #3 (permalink)  
Antiguo 07/12/2011, 12:47
Avatar de Hurieta  
Fecha de Ingreso: enero-2011
Mensajes: 27
Antigüedad: 13 años, 9 meses
Puntos: 2
Respuesta: Fondo estático

Código:
CSS

body{background-position:fixed; background-image:url(localizacion de la imagen);}
Espero que te sirva ;)
  #4 (permalink)  
Antiguo 07/12/2011, 19:37
 
Fecha de Ingreso: diciembre-2011
Mensajes: 3
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Fondo estático

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!
  #5 (permalink)  
Antiguo 08/12/2011, 08:29
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Fondo estático

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! :)
  #6 (permalink)  
Antiguo 08/12/2011, 09:24
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 13 años, 2 meses
Puntos: 50
Respuesta: Fondo estático

Prueba así:



Código CSS:
Ver original
  1. body {
  2. background-attachment:fixed;
  3. background-repeat:no-repeat;
  4. background-image:url('fondo1.JPG');
  5. }

Saludos
  #7 (permalink)  
Antiguo 08/12/2011, 10:10
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Fondo estático

Me sale de la siguiente manera.. :(



Saludos y gracias! ~~
  #8 (permalink)  
Antiguo 08/12/2011, 10:11
 
Fecha de Ingreso: septiembre-2011
Mensajes: 158
Antigüedad: 13 años, 1 mes
Puntos: 15
Respuesta: Fondo estático

Código:
body {
background-image:url(imagenes/130.jpg);
background-position:top center;
background-attachment:fixed;
}
  #9 (permalink)  
Antiguo 08/12/2011, 10:28
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 13 años, 2 meses
Puntos: 50
Respuesta: Fondo estático

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
  #10 (permalink)  
Antiguo 08/12/2011, 12:58
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Fondo estático

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!! :)

Etiquetas: contenido
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 16:34.