Lleno de fondo de pantalla con CSS

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 6th, 2011, 11:09 pm

Saludos Grupo,

Estoy tratando de construir un sitio web similar a la http://www.park14.com/index1.html . Pero no quiero usar cualquier Flash. Prefiero crear algo que se utiliza un fondo CSS pantalla completa. Además de tener el cuerpo principal se centro vertical y horizontalmente. ¿Es esto posible. Agregar Javascript podría ser un posible, pero no Flash. Si alguien sabe de algún bien hasta la fecha los tutores por favor envíe enlaces. Me sería de gran aprecio.

Zaiah

Anonymous
Bot
- www.ozzu.com
Registrado: 25 Feb 2008
Mensajes: ?
Loc: Ozzuland
Status: Online

Abril 6th, 2011, 11:09 pm

righteous_trespasser
Scuffle
Registrado: Mar 12, 2007
Mensajes: 6228
Loc: South-Africa
Status: Offline

Abril 7th, 2011, 3:52 am

Lo que están haciendo no es bastante un fondo que se extiende a pesar de...Si se mira atentamente se dará cuenta de que el fondo es de baldosas y 4 esquinas están superpuestos para dar el efecto de sombra. Esto debería ser bastante simple de hacer realidad.

El código HTML debe ser similar a la siguiente:

HTML Código: [ Select ]

...
<body>
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</body>
...

...
<body>
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
</body>
...

Su CSS se vería como sigue:

CSS Código: [ Select ]

body{
background-image:url(/images/repeating_background.jpg);
}
div#topleft{
position:absolute;
top:0;
left:0;
background-image:url(/images/topleft.png);
width:100px;
height:100px;
}
div#topright{
position:absolute;
top:0;
right:0;
background-image:url(/images/topright.png);
width:100px;
height:100px;
}
div#bottomleft{
position:absolute;
bottom:0;
left:0;
background-image:url(/images/bottomleft.png);
width:100px;
height:100px;
}
div#bottomright{
position:absolute;
bottom:0;
right:0;
background-image:url(/images/bottomright.png);
width:100px;
height:100px;
}

body{
background-image:url(/images/repeating_background.jpg);
}
div#topleft{
position:absolute;
top:0;
left:0;
background-image:url(/images/topleft.png);
width:100px;
height:100px;
}
div#topright{
position:absolute;
top:0;
right:0;
background-image:url(/images/topright.png);
width:100px;
height:100px;
}
div#bottomleft{
position:absolute;
bottom:0;
left:0;
background-image:url(/images/bottomleft.png);
width:100px;
height:100px;
}
div#bottomright{
position:absolute;
bottom:0;
right:0;
background-image:url(/images/bottomright.png);
width:100px;
height:100px;
}

Let's leave all our *plum* where it is and go live in the jungle ...

SteelyDanFan
Born
Registrado: Sep 23, 2008
Mensajes: 2
Status: Offline

Abril 7th, 2011, 6:45 pm

Si he entendido bien estás interesado en una imagen estática que llena la ventana del navegador, independientemente de la relación de aspecto de la pantalla de los usuarios. También desea que el contenido de "flotar" en el centro. Me enfrenté al desafío mismo de hace 3 a 6 meses. Si se asume que es su objetivo recomiendo inmediatamente después de que el cuerpo de etiquetas de cargar la imagen que va a "actuar" como la imagen de fondo, pero sólo porque el código CSS está diciendo que se estire y caída de detrás de su contenido. Minas tiene el siguiente aspecto:

HTML Código: [ Select ]

Y las miradas CSS así:

CSS Código: [ Select ]

img#bg
{ position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: -1;
}

img#bg
{ position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: -1;
}

Si se hace correctamente la imagen se ajusta automáticamente la anchura y la altura, mientras que el contenido de flota en el centro.

Bogey
Bogey
Registrado: Jul 14, 2005
Mensajes: 8211
Loc: USA
Status: Offline

Abril 8th, 2011, 4:00 pm

CSS Código: [ Select ]

body {
background: #000000 url('dir/img.jpg') fixed no-repeat center center;
}

.content {
width: 80%;
margin: 0 50%;
}

body {
background: #000000 url('dir/img.jpg') fixed no-repeat center center;
}
.content {
width: 80%;
margin: 0 50%;
}

HTML Código: [ Select ]

<body>
<div class="content">
<p>Content</p>
</div>
</body>

<body>
<div class="content">
<p>Content</p>
</div>
</body>

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 9th, 2011, 1:52 am

Gracias Justo. Veo lo que quieres decir acerca de las 4 esquinas ahora.

He encontrado lo que quiero hacer aquí: http://css-tricks.com/examples/ImageToBackgroundImage/ y he estado trabajando con una plantilla que siempre que el resto del estilo estoy buscando. El problema ahora es la fusión de las dos. He ido dando vueltas y vueltas con esto por horas. Y puedo parecer conseguir estas líneas par de HTML y CSS hacer lo que ellos necesitan!
Heres el código que funciona a la perfección-

HTML

Código: [ Select ]

<!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>
    <title>Scaling Background</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body id="page-body">
  <img id="background-img" class="bg" src="../images/bg.jpg" alt="" />
</body>

</html>

<!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>
<title>Scaling Background</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="page-body">
<img id="background-img" class="bg" src="../images/bg.jpg" alt="" />
</body>
</html>

CSS

Código: [ Select ]

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 62.5%;
    font-family: Georgia, serif;
    overflow: hidden;
}

.bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5000;
}

* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Georgia, serif;
overflow: hidden;
}
.bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5000;
}

Este código HTML y CSS hacer exactamente lo que desea.
Sin embargo estoy tratando de agregar este estilo de fondo a una plantilla. Y me parece que no puede entender cómo cambiar el CSS y HTML para darle el aspecto deseado.

Heres donde creo que el problema es-

PLANTILLA HTML

Código: [ Select ]

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to One Sports Lounge</title>
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/nivo-slider.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.cycle.all.2.72.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.galleriffic.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/cufon-yui.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/titillium.font.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.nivo.slider.pack.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/boutique.js" ></script>
</head>
<body>...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to One Sports Lounge</title>
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/nivo-slider.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.cycle.all.2.72.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.galleriffic.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/cufon-yui.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/titillium.font.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.nivo.slider.pack.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/boutique.js" ></script>
</head>
<body>...

PLANTILLA CSS

Código: [ Select ]

html {
    height: 100%;
}
body {
    background: #fff url(../images/bg.jpg) top center repeat-x;
    color: #222;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    height: 100%;
}

html {
height: 100%;
}
body {
background: #fff url(../images/bg.jpg) top center repeat-x;
color: #222;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
height: 100%;
}

Cualquier ayuda sobre este tema sería muy apreciada. Si no puedo obtener el aspecto que quiero me conformaré con el otro.

righteous_trespasser
Scuffle
Registrado: Mar 12, 2007
Mensajes: 6228
Loc: South-Africa
Status: Offline

Abril 11th, 2011, 1:25 am

¿Qué es exactamente el problema que está experimentando?

Let's leave all our *plum* where it is and go live in the jungle ...

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 11th, 2011, 8:43 am

y para ser honesto over_me_headism un poco.

en serio. Quiero que el fondo de la página a la escala en proporción a la ventana. similar a este http://css-tricks.com/examples/ImageToBackgroundImage/

No puedo obtener el CSS para trabajar en el sitio Im tratando de construir. Cada vez que reemplace lo que actualmente existe el fondo es blanco.

righteous_trespasser
Scuffle
Registrado: Mar 12, 2007
Mensajes: 6228
Loc: South-Africa
Status: Offline

Abril 11th, 2011, 11:10 pm

Theres ningún vínculo para mí para ver exactamente lo que está sucediendo, intentar las dos cosas siguientes:
Asegúrese de que la imagen existe en el servidor y que la ruta es correcta.
Descargar Firebug para Firefox y haga clic derecho en el cuerpo y selecciona "Inspeccionar" y ver si eso te ayuda (una especie depurador poco de cosas).

Let's leave all our *plum* where it is and go live in the jungle ...

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 11th, 2011, 11:47 pm

gracias
Im que va a ser el anfitrión.

graphixboy
Control + Z
Registrado: Jul 11, 2005
Mensajes: 1828
Loc: In the Great White North
Status: Offline

Abril 13th, 2011, 12:36 pm

Hey Zaiah bueno verte por aquí otra vez (no es que yo debería hablar, he sido un poco últimamente yo MIA). ¿Recibió todo lo descubierto?

Si no le recomiendo tratar de combinar los archivos CSS en uno solo. De esa manera usted puede encontrar las cosas que anulan unos a otros y especificar el orden en que piensan que debe ser anulado. Mi conjetura es que usted tiene dos declaraciones para el mismo nombre de clase y eso lo está matando. Sólo recuerde que CSS se lee de arriba hacia abajo para. bg {} en la parte inferior del documento prevalecerá sobre los mismos atributos en. bg {} en la parte superior del archivo.

Si eso no es claro hasta puede publicar un enlace? Su mucho más fácil de rastrear esta pasando si puedo usar algo como Firebug.

If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

righteous_trespasser
Scuffle
Registrado: Mar 12, 2007
Mensajes: 6228
Loc: South-Africa
Status: Offline

Abril 13th, 2011, 11:10 pm

graphixboy escribió:

Si eso no es claro hasta puede publicar un enlace? Su mucho más fácil de rastrear esta pasando si puedo usar algo como Firebug.

QFT

Let's leave all our *plum* where it is and go live in the jungle ...

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 28th, 2011, 8:18 pm

Hola chicos. Espero que todavía están dispuestos a ayudar a un pobre. ¿Puedo decir que realmente tienen una pasión por el diseño de la web. Creo que acaba de obtener la confianza nervioso y suelta a veces. De todos modos.... Heres el enlace del sitio alojado, http://
http://isaiahmerriweather.com/ONE/index.html

Pareja cuestiones que no puedo entender.
Me di por vencido en el fondo de escala entera por el simple hecho de hacer las cosas y ahora no puedo ver las bg en absoluto a menos que se visualizan en IE. SMH. En segundo lugar me gustaría que a la escala a la página si es posible, similar a esta página- http://css-tricks.com/examples/ImageToBackgroundImage/ si es posible. Sé que puedo hacerlo. Im justo pasando por alto algo. En tercer lugar, en FF, la navegación se empuja hacia abajo muy lejos. Toda la página debe aparecer por encima de la tapa. Esto ocurre en Opera, Safari, IE y Chrome.

Y tengo más proyectos Id amor a noquear. Con eso se dice, ¿puede alguien directo a algunos profesores realmente buenos? No he hecho esto en sooooo maldito tiempo. Creo que tengo que empezar de cero. También HTML5 y CSS3? ¿Sería un mejor uso del tiempo para comenzar a aprender los que el aprendizaje de la tecnología más antigua? Cualquier ayuda es muy apreciada. Gracias mucho.

PS No es la navegación por debajo de la galería de imágenes deslizante. Su blanco y sin embargo no se puede ver en el fondo blanco.

También...el cliente quiere que el fondo de la caja de contenido que se transpare no lo puedes ver las bg damasco encantadora. ¿Hay una buena solución para esto en IE? Heres el bg- http://isaiahmerriweather.com/ONE/images/bg.jpg

Bogey
Bogey
Registrado: Jul 14, 2005
Mensajes: 8211
Loc: USA
Status: Offline

Abril 28th, 2011, 8:55 pm

HTML Código: [ Select ]

<html>
<head>
<title>Zaiah Page</title>
<style language="text/css">
.bg {
top: 0;
left: 0;
width: 100%;
z-index: 5000;
position: absolute;
}

.content {
top: 200px;
left: 0px;
width: 100%;
color: white;
z-index: 6000;
font-size: 18px;
position: relative;
text-align: center;
padding: 20px 0 20px 0;
}
</style>
</head>
<body>
<img src="bg.jpg" class="bg" alt="" />
<div class="content">
<p>Hello world!</p>
</div>
</body>
</html>

<html>
<head>
<title>Zaiah Page</title>
<style language="text/css">
.bg {
top: 0;
left: 0;
width: 100%;
z-index: 5000;
position: absolute;
}
.content {
top: 200px;
left: 0px;
width: 100%;
color: white;
z-index: 6000;
font-size: 18px;
position: relative;
text-align: center;
padding: 20px 0 20px 0;
}
</style>
</head>
<body>
<img src="bg.jpg" class="bg" alt="" />
<div class="content">
<p>Hello world!</p>
</div>
</body>
</html>

Esto es, si la bg.jpg está en la misma carpeta...Estoy seguro que usted puede encontrar la manera de utilizar ese código a tu gusto.

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

zaiah
Proficient
Registrado: Dic 15, 2007
Mensajes: 375
Status: Offline

Abril 28th, 2011, 10:28 pm

Estoy muy agradecida por la ayuda. Gracias chicos. De hecho, me utilizó una combinación de las dos sugerencias.

http://isaiahmerriweather.com/ONE/index.html

Sin embargo...lol...ahora se hace algo realmente funky en IE donde la navegación es junto a la galería de control deslizante. Yo personalmente no uso IE, pero mucha gente de edad. lol. alguna sugerencia?

Bogey
Bogey
Registrado: Jul 14, 2005
Mensajes: 8211
Loc: USA
Status: Offline

Abril 28th, 2011, 10:53 pm

¿Qué está haciendo en el IE? Se ve exactamente igual en IE como en Firefox para mí...prueba a vaciar la caché.

Im usando IE8

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Anonymous
Bot
- www.ozzu.com
Registrado: 25 Feb 2008
Mensajes: ?
Loc: Ozzuland
Status: Online

Abril 28th, 2011, 10:53 pm

1, 2

Para responder a este tema que necesita para ingresar o registrarse. Es gratis.

Publicar Información

Total de mensajes en este tema: 16 mensajes
Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 126 invitados

No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro
No puede enviar adjuntos en este Foro

Lleno de fondo de pantalla con CSS

Publicar Información

Recursos útiles

Otros Idiomas

Desarrollo de Sitios Web

Gráficos

OS y Ferretería

Marketing por Internet

Mercado

Zona Comunidad

Ozzu Mantenimiento

Foro Red

Foro de Socios

Foro de Aficionados