2 fondos

Hola!
Soy nuevo por aqui y tenia una duda.
Queria poner 2 fondos (sin usar css3), el motivo es que quiero que cada imagen me quede en cada esquina superior, sin importar la resolucion de pantalla del usuario y es la unica alteernativa que he encontrado, he estado buscando por foros pero no encontraba solución.
Si alguien tiene la respuesta le agradeceria que me ayudara :wink:

saludos!

No entiendo muy bien lo que quieres ,si quieres dividir la pantalla en dos imágenes una a la izquierda y otra a la derecha , con hoja de estilos te quedaría así:

Podría hacer dos divs en el body en tu html donde quieres que estén a cada divs ,pones un nombre(yo use aquí fondo1 y fondo2 par a los divs)

<div id="fondo1">[contenido no disponible]< width="400" height="400"></div>
<div id="fondo2">[contenido no disponible]< width="400" height="400"></div>

Luego en la hoja de estilos pones donde van ubicados, uno a la derecha y otro a la izquierda(también use fondo1 y fondo2 para las imágenes)


#fondo1 {width:400 px ; float:left ; background-image: url(objetos/fondo 1.png) ; background-repeat:no-repeat }
#fondo2{width:400px ; float:right; background-image: url(objetos/fondo 2.png) ; background-repeat:no-repeat }

En cualquier caso , a los divs puedes poner la posición que quieras float:right (derecha) float:left(izquierda) o también puedes poner que tan lejos o cerca deben estar de los bordes con pixeles , background-image: puedes estar en la hoja de estilos o en la hoja htlm

:D

Me ha funcionado bien tu metodo pero me a surgido un nuevo problema. Yo quiero poner la imagen de 2 cortinas y que siempre queden pegadas al margen, sin que importe la resolucion del navegador del usuario (si fijo las cortinas a 800px, alguien con resolucion 1200 vera mas fondo a cada lado de las cortinas)
Con tu metodo al ser parte del fondo, cuando el navegador se minimiza la web se desmorona porque las cortinas la tiran hacia abajo. Quiza haya alguna solucion para eso sino me tendre que quedar sin poner ese fondo jajaj.
Saludos y gracias!

Talvez si cambiaras 400 px por 50% tanto el la hoja de estilo como en el html

#fondo1 {width:50% ; float:left ; background-image: url(objetos/fondo 1.png) ; background-repeat:no-repeat }

Pero yo creo que el problema pasa porque el tamaño real de la imagen es fijo, y si pones al div que ocupe la mitad de la pantalla un 50% se vera bien en una pantalla de 800 px como en una de 1200 px, pero como el problema pasa por el tamaño de la imagen que es fijo 400 px y se vera pequeña en una pantalla grande.

También podrías agrandar la imagen a 600 px de ancho así se vera bien en una pantalla grande y en una pantalla chica se vera demasiado grande, pero aparecerá una barra movible abajo para indicar que es mas ancho.

Esta es la forma de que cualquier imagen se vea igual en cualquier resolucion de pantalla:
http://www.comocreartuweb.com/phpBB2/ftopic21836.html&highlight=
Haz una imagen con tus 2 cortinas y de esta maneras la tendras de fondo.

zonurb escribió:Talvez si cambiaras 400 px por 50% tanto el la hoja de estilo como en el html

#fondo1 {width:50% ; float:left ; background-image: url(objetos/fondo 1.png) ; background-repeat:no-repeat }

Pero yo creo que el problema pasa porque el tamaño real de la imagen es fijo, y si pones al div que ocupe la mitad de la pantalla un 50% se vera bien en una pantalla de 800 px como en una de 1200 px, pero como el problema pasa por el tamaño de la imagen que es fijo 400 px y se vera pequeña en una pantalla grande.

También podrías agrandar la imagen a 600 px de ancho así se vera bien en una pantalla grande y en una pantalla chica se vera demasiado grande, pero aparecerá una barra movible abajo para indicar que es mas ancho.

El problema zonurb es que no forman parte del fondo, sino que son dos imagenes insertadas, entonces cuando se minimiza el navegador tiran la web acia abajo.

gjulian escribió: Esta es la forma de que cualquier imagen se vea igual en cualquier resolucion de pantalla:
http://www.comocreartuweb.com/phpBB2/ftopic21836.html&highlight=
Haz una imagen con tus 2 cortinas y de esta maneras la tendras de fondo.

gjulian, con ese metodo el fondo se me sobrepone a toda la web, ademas de que se deforman un poco las cortinas (bueno ami se me ve deformado porque mi resolucion es muy grande)
Haber si me podeis ayudar a solucionar este problema que llebo toda la semana intentando cosas sin mucho resultado :wink: gracias.

http://img442.imageshack.us/img442/9404/gjulian.jpg

Bueno, pues hazlo en dos imagenes. Una por cada cortina y despues las colocas en un div cada una, una a la drch. y otra a la izqd. en el fondo negro.
Y para que se vea mas o menos igual en cualquier resolucion, haz la web en porcentaje , en vez de medidas concretas.

Una pregunta, hay algun metodo para hacer como tu dices pero que cuando se minimize el navegador salga un scroll por abajo, en vez de desmoronarse y tirar el contenido de la web hacia abajo?

gracias por toda la ayuda :wink:

hola

ya subiste tu web???
danos la url para verlo

saludos

ahi esta para que veais a lo que me refiero
http://cazapeliculas.myartsonline.com/

es quel.... eso no es poner imagenes de fondo

cuando pones una imagen de fondo debe ir en el css
no en el html, ahi solamente estàs insertando imagenes como tal
tonces...por eso se descuadra

Yo lo que haria es esto

#fondo1{background-image: url(objetos/telon1.jpg); width:400px; height:602px ; float: left}
#fondo2 {background-image: url(objetos/telon2.jpg); width:216px ; height:607px ; float: right}

<div id="global">
<div id="fondo1"></div>
<div id="fondo2"></div>

intentalo de esa manera, y nos cuentas

Bien, ha quedado bastante bien pero sigo teniendo el problema de que sigue tirando la web hacia abajo cuando se minimiza el navegador, en lugar de salir un scroll (no se si le tengo que agregar algun comando a esas lineas referente a eso) y el otro problema es que la web no se situa bien en el centro. Subo los cambios por si le quieres hechar un ojo, muchisimas gracias Yaneth! :wink:

ok

mira lo que hice

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<LINK REL="SHORTCUT ICON" HREF="objetos/favicon.ico">
<title>Portada - El Cazapeliculas</title>
<link rel="stylesheet" href="ayuda2.css" type="text/css" media="all">
</head>
<body>
<div id="fondo2" ></div>
<div id="global" align="center">


<div id="curva-superior"></div>
<div id="cabecera">

<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>

Peliculas

Series

Documentales

Anime

Foro
</div>


<div id="contenido">


<h1>XXXXXXXXXXXXXXXXXXXXXXXXXX</h1>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<h2>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web
</div>
</div>


<div id="curva-inferior"></div>
</div>
</body>
</html>

_______________________________________________________


* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font-size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {background-color:black; background-image: url(objetos/telon1.jpg); background-repeat:no-repeat; text-align:center; }
#fondo2 {
background-image: url(objetos/telon2.jpg);
width:216px;
height:607px;
float: right;
position:absolute;
top:0px;
left:791px;
z-index: -1;
}
#global {width:800px ; margin:4px auto ; float:center }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px;}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: black ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:14px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height:65px }
#pie li {list-style:none ; font-size:12px}
#pieuno { color:#FFFFFF; float:left ; width:150px}
#piedos {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height:12px ; overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}


lo checas, lo subes y nos avisas

saludos

mmm subi tal y como tu has puesto, y queda bien solo que el fondo 2 no se adapta al margen derecho, quité lo de position:absolute y se ponia bien pero entonces la web ya no quedaba centrada en medio. De nuevo muchas gracias! creo que ya queda poco

estaba apunto de decirte que nooooo, que no se puede
pero me he dado el chance de ver un poco mas

mira me ha quedado asi el asunto

#fondo2 {
background-image: url(objetos/telon2.jpg);
width:216px;
height:607px;
float: right;
position:absolute;
z-index: -1;
top:0px;
right:0px
}

todo lo demàs igual

solo una cosita en global

quitale el float center

miralo, a ver que te parece

saludos