Comunidad de diseño web y desarrollo en internet online

fondo pantalla completa en HTML para cualquier navegador

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 22 Ene 2010 03:15 pm
Hola...ando haciendo un sitio, con un fondo que no quiero repetir y no es una linea degradada que se repita en X...
es un fondo con degradado y un pastito negro al pie del fondo, lo que necesito es que ee fondo se quede al 100% en ancho y alto y que lo registren por lo menos los naveadores básicos (Mozilla, Safari, IE) y resoluciones alternas...ando usando por el momento HTML puro con Kompozer, porfavor el que me quiera ayudar serán bienvenidas sus opiniones, gracias :D

saludos
aLEx

Por alex87

20 de clabLevel



 

Envíale un mensaje privado     Web

msie8
Citar            
MensajeEscrito el 22 Ene 2010 11:03 pm
Simplemente estos atributos CSS te valdrían:

Código HTML :

width: 100% ;
height: 100% ;


También lo puedes poner así:

Código HTML :

<img src="ruta/archivo.jpg" height="100%" width="100%" />


¿Es eso?

Si no te sale, posteanos el código que estás usando.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

 

Envíale un mensaje privado   Email   Web

Las Palmas De Gran Canarias

firefox
Citar            
MensajeEscrito el 24 Ene 2010 01:16 am
hola distriker, si, creo que eh confundido el codigo, lo puse en el body:

<body background="ruta/archivo.png" width="100%" height="100">
</body>

aunque si lo pongo ente las etiquetas del body tampoco sirve, por que no puedo poner nada encima, no queda como fondo.
Con CSS en:

.body {
background-image: ruta/archivo.png;
backgroun-repeat: no-repeat;
width=100%;
height=100%;
margin=0;
border=0;
padding=0;
}

tampoc que da bien, aunque halla hehco una imagen de ej. 1000x1000 px no queda a todo el ancho de pantalla.

com lopued solucionar????

saludos
aLEx

Por alex87

20 de clabLevel



 

Envíale un mensaje privado     Web

msie8
Citar            
MensajeEscrito el 24 Ene 2010 02:52 pm
Antes de nada querido amigo, revisa tu CSS, que no es así:

Código :

width=100%;
height=100%;
margin=0;
border=0;
padding=0;


Es así:

Código :

width: 100% ;
height: 100% ;
margin: 0 ;
border: 0 ;
padding: ' ;


¿Qué crees?

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

 

Envíale un mensaje privado   Email   Web

Las Palmas De Gran Canarias

firefox
Citar            
MensajeEscrito el 24 Ene 2010 09:56 pm
No acabo de pillar muy bien cuál es tu intención, así que quizás la solución planteada en este tema no sea lo que buscas.

Distriker, entre este código:

Código HTML :

width=100%;
height=100%;
margin=0;
border=0;
padding=0;

y este otro:

Código HTML :

width: 100% ;
height: 100% ;
margin: 0 ;
border: 0 ;
padding: ' ;

No hay diferencia, excepto el error de dedo del valor del padding. Los espacios en blanco o saltos de línea en la mayoría de los casos* sirven más a un propósito de entendimiento humano del código, no de la máquina.

Saludos

* mayoría de los casos= excepto cuando defines en la misma regla varios selectores [#uno, #dos, #tres {...}], o alto grado de especificidad [#uno .dos p {..} es distinto de #uno.dos p {...}] o en algunos valores de propiedades [XXpx], [url(...)] y alguna cosilla más.

Por DvillB

118 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 25 Ene 2010 12:04 am
Lo que Distriker te dice es en el uso del =

Código HTML :

margin:0;

no es lo mismo que

Código HTML :

margin=0;


Probá poniendo unos valores distintos a 0 para que vea que con = no funciona.

Saludos

Por GustavoV

Claber

136 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 25 Ene 2010 06:12 am
jeje..primero que nada estoy apenado...querido amigos la verdad muchas gracias por su preocupación
y por asistirme con mi duda y realmente tomarse el tiempo en responderme. La verdad es que me cuatrapie
en escribirles aqui el codigo CSS... es que me ando mudando del Dreamweaver al kompozer, y eso de usar desde siempre el dreamweaver crea un mal vicio. El codigo si esta con los : , lo que si he checado es que con o sin el espacio entre los dos puntos y el punto y coma no genera problema :S...bueno la verdad que no se como le hacen para poner un fondo a pantalla completa genérico para cualquier navegador y resolucion de pantalla...seguire usando el método de prueba y error y esperando sus comentarios.

saludos, buen karma
aLEx.

Por alex87

20 de clabLevel



 

Envíale un mensaje privado     Web

msie8
Citar            
MensajeEscrito el 25 Ene 2010 01:26 pm
GustavoV gracias.

Creo que le debo una disculpa a Distriker junto al reconocimiento de mi ceguera. Pasé por alto lo más obvio. Sin paliativos ni atenuantes mi despiste. Él estaba en lo cierto y yo errado en esa parte.

Alex87, para una respuesta "aquí está el código" sería bueno que:
1º: compartas la imagen que quieres usar.
2º: matices o explique mejor qué significa para ti "para poner un fondo a pantalla completa genérico para cualquier navegador y resolucion de pantalla"

--> ¿tienes una imagen y quieres que se muestre TODA, sin recortes y ocupando toda la ventana con independencia del tamaño y la relación alto/ancho?
Posible, pero se deformará.
¿quieres que se se muestre toda la anchura perdiendo altura?
¿quieres que se muestre toda la altura aunque se pierda por los laterales?
...

Como ves, tengo dudas sobre lo que necesitas. Y cada caso requiere su solución.

En el ejemplo que te enlazaba,se muestra toda la imagen en la vertical y centrada, perdiendo por los laterales. Y eso está en:

Código HTML :

background: url(http://www.tododesarrolloweb.es/imagenes/bgPagina.jpg) no-repeat center top;


Ya comentas, a ver si entre todos podemos resolverte el puzle.

Saludos

Por DvillB

118 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 25 Ene 2010 03:07 pm
No te preocupes DvillB, errar es humano (pero yo no soy humano :lol:)

Alex, haz como te dicen, sube la página de pruebas o sácale una imagen, si la subieses a un servidor y nos dieces la URL, mejor que mejor.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

 

Envíale un mensaje privado   Email   Web

Las Palmas De Gran Canarias

firefox
Citar            
MensajeEscrito el 06 Feb 2010 06:49 pm
Hay una solución practica, crea dos fondos (separando el degrade y el pastito) uno en el html y otro con el body, ha ambos les pones background-image y los posicionas en "x" e "y "segun la necesidad

html{
background-color: //dale un color de fondo
background-image: //imagen de fondo puede ser para la linea de degrade

}

body{
background-image: // puede ser la imagen que va encima del degrade como el pie

Por iViktor

21 de clabLevel



 

Envíale un mensaje privado   Email  

chrome
Citar            
MensajeEscrito el 06 Feb 2010 06:52 pm
ah...era HTML puro, bueno si optas por agregarle CSS lo anterior puede ayudarte

Por iViktor

21 de clabLevel



 

Envíale un mensaje privado   Email  

chrome
Citar            
MensajeEscrito el 27 Jun 2019 08:27 am
Me ha resultado muy útil, para un proyecto que estoy haciendo con wordpress Significadopedia me viene de lujo todo esto, estoy depurando un poco el código del CSS también.

Por forjoel

9 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 04 Jul 2019 07:03 am
Se supone que con un Width:100% del contenedor principal debería de mostrarse al ancho completo...no? O es otra la duda?

Por jstass

1 de clabLevel



 

Envíale un mensaje privado     Web

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.