Foros del Web » Creando para Internet » CSS »

fondo de esta web

Estas en el tema de fondo de esta web en el foro de CSS en Foros del Web. Hola a todos!! ¿Alguien sabe cómo se consigue que el fondo de la web "http://www.fragmentlabs.com/" sea siempre el mismo? Es decir, que nunca se escale ...
  #1 (permalink)  
Antiguo 03/05/2010, 03:29
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 7 meses
Puntos: 0
fondo de esta web

Hola a todos!!

¿Alguien sabe cómo se consigue que el fondo de la web "http://www.fragmentlabs.com/" sea siempre el mismo? Es decir, que nunca se escale a pesar de los comandos ctrl + + o ctrl + -.

Tengo instalado el web developer y he estado viendo su css pero realmente, no se si es css (de ahí que lo haya puesto en esta sección), actionscript..., vamos, que me he hecho un lío.

¿Alguien sabe qué comando/función es? sólamente necesito saber el nombre de la función para poder seguir investigando.

De todas formas, gracias.

Saludos a todos.
  #2 (permalink)  
Antiguo 03/05/2010, 05:12
Avatar de eMaa  
Fecha de Ingreso: octubre-2008
Mensajes: 223
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: fondo de esta web

No me doy cuenta como, pero se podria hacer con una caja que funcione como fondo y despues le das un maximo de ancho y alto, creo que asi funcionaria
  #3 (permalink)  
Antiguo 03/05/2010, 07:49
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: fondo de esta web

ya se ah tratado muchas veces... Fondo liquido pasate por las faqs
  #4 (permalink)  
Antiguo 03/05/2010, 13:47
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: fondo de esta web

Muchas gracias tanto a eMaa como a alexk por responder.

No sabía que se llamase fondo líquido, aunque sí que había escuchado sobre los layers líquidos, así que gracias por la aclaración.

alexk, he seguido las instrucciones y mi duda inicial ha quedado 100% resuelta. Ahora tengo otra. Una vez que he puesto todo el css tal y como se indicaba en el tema de "fondo líquido" que me indicastes, el tema del fondo funciona tal y como quería. La única pega es que la estructura junto con el contenido no se ve, es decir, se ve el header (que tiene fondo negro) pero no se ve el logo ni el menu (son imágenes) que contiene el mismo header. Lo que sí se ve es el texto html que se genera, pero las imagenes no. No se que es lo que falla aquí.

Aquí va el css:
* { margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
position: relative;}

html, body{width:100%
height:100%;
overflow:hidden;}

.img_bg{width:100%;
height:100%;
position:absolute;
z-index:1;}

.all{width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: auto;
left: 0pt;
top: 0pt;
z-index: 2;}

.cont{width:80%;
margin:0 auto;}

#header {position:fixed;
background-color: #000;
background-attachment: fixed;
height: 40px;
width: 100%;
z-index: 2;
top: 0px;
left: 0px;}

#logo {background-image: url(Logo.jpg);
float: left;
height: 34px;
width: 207px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
z-index: 2;}

#menu {background-image: url(menu.jpg);
float: right;
height: 32px;
width: 358px;
margin-top: 4px;
margin-right: 20px;
margin-bottom: 4px;}

#contenedor {position:absolute;
left: 0;
right: 0;
background-image: url(fondo_menor.jpg);
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-position: 100% 100%;}

#space {height: 100px;
width: 800px;
margin-right: auto;
margin-left: auto;}

#content {height: 500px;
width: 800px;
margin-right: auto;
margin-left: auto;}

Ahí va el body:
<body>
<img src="A ver si puede ser esta/fondo_menor.jpg" class="img_bg" alt="Fondito" />
<div class="all">
<div class="cont">
<div id="header">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="space"></div>
<div id="content"><img src="content.jpg" width="800" height="459" /></div>
</div>
tu contenido (esto es lo único que se puede ver junto con el color negro del header)</div>
</div>
</body>
  #5 (permalink)  
Antiguo 04/05/2010, 04:23
 
Fecha de Ingreso: mayo-2010
Mensajes: 6
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: fondo de esta web

Me respondo a mi mismo para que le pueda servir a alquien con el mismo problema.

El problema ya está resuelto. Las imágenes no se veían porque estaban como fondo de sus respectivos divs en vez de estar insertadas. Así que lo único que he hecho ha sido quitar en el css las imágenes de fondo e ir al html e insertar las imágenes y problema solucionado.

ej:

#logo {background-image: url(Logo.jpg); esta propiedad la he quitado
float: left;
height: 34px;
width: 207px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
z-index: 2;}

y la he insertado en su div:
<div id="logo"><img src="Logo.jpg" width="207" height="34" /></div>

Saludos.
  #6 (permalink)  
Antiguo 08/05/2010, 07:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: fondo de esta web

Hola:

Un consejo.

Cita:
Iniciado por Jose_CSS Ver Mensaje
* { margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
position: relative;}
Esto lo puedes "resumir" así y el efecto es el mismo.

Código CSS:
Ver original
  1. * {margin:0;
  2.      padding:0;
  3.      position:relative;}

Saludos.


Etiquetas: fondo
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 09:03.