¿Como hacer la cabecera a pantalla completa?

Rubencanovas · #1 (**permalink**) 04/07/2013, 05:45

Muy buenas, estoy diseñando un blog y me gustaría saber como poner una imagen PNG encima de un fondo blanco, como cabecera para que ocupe toda la pantalla del visitante. Es decir, cuando ponga la dirección de mi blog, se vea la imagen en el centro con todo el fondo blanco ocupando la resolución de cada pantalla.

¿Sabeis como hacerlo?

Muchas gracias.

pzin · #2 (**permalink**) 04/07/2013, 06:25

Pues con poner la imagen dentro de un div con fondo blanco y alineado al centro tienes.

Código HTML:

Ver original<div>
  <img src="algo.png">
</div>

Código CSS:

Ver originaldiv {
  text-align: center;
  background: white;
}

Rubencanovas · #3 (**permalink**) 04/07/2013, 07:50

No se donde meter el código que me dices... soy muy novato con esto...

Esta sería la web:

http://rcanovasmk.blogspot.com.es/

pzin · #4 (**permalink**) 04/07/2013, 08:39

No sé cómo funciona blogspot la verdad.

De hecho ni siquiera sé si se puede o no cambiar o editar el código HTML/CSS.

Pero básicamente lo que tienes que hacer es eso. Normalmente el código va en el documento HTML, y el otro en el fichero CSS. Pero como digo, blogspot es otro mundo que no conozco.

Rubencanovas · #5 (**permalink**) 04/07/2013, 10:45

No tengo ni idea, desde Blogspot no se pueden subir archivos específicos, creo que el CSS y el HTML van en un mismo sitio. ¿Alguien sabe algo sobre esto? Muchas gracias!

ArturoGallegos · #6 (**permalink**) 04/07/2013, 12:59

pasa a leer la documentación de blogger o incluso buscando en google encontraras información... para lo que necesitas en este link lo puedes ver.
https://support.google.com/blogger/answer/46870?hl=en

Rafael · #7 (**permalink**) 04/07/2013, 14:23

Mi versión:

Código CSS:

Ver original.Contenedor {
width: auto; overflow: hidden;}
 
.Contenedor img {
width: 100%; position: relative;}

Código HTML:

Ver original<div class="Contenedor"><img src="Foto.jpg"></div>

Rubencanovas · #8 (**permalink**) 04/07/2013, 15:40

He intentado meter el código en todos lados, pero no lo consigo, no paro de probar cosas y la plantilla se deforma. El blog es este: http://rcanovasmk.blogspot.com.es/

Y la url de la imagen: http://4.bp.blogspot.com/-s2vi6tgeSQ...s664/hello.png

Me gustaría hacer una especie header que según la resolución de cada pantalla, solo se vea la imagen en toda la pantalla, y al bajar, el contenido.

No os pido que me lo hagais, solamente quiero saber como se haría, y donde abría que meterlo para aprender... Muchas gracias amigos!

Rafael · #9 (**permalink**) 04/07/2013, 17:30

Ya te puse cómo se hace.

Rubencanovas · #10 (**permalink**) 04/07/2013, 17:35

¿Pero donde meto el div y el contenedor? ¿Debajo de donde, entre donde? jaja

ArturoGallegos · #11 (**permalink**) 04/07/2013, 18:24

mmmm aun nada... como dicen hay que aprender a caminar antes de querer correr, necesitas detenerte y poner a leer y documentarte bien, busca en google "how create blogger theme" y obtendrás muchos resultados.

para el CSS busca una etiqueta llamada <b:skin> y pon lo que necesites dentro de esta y el html colócalo dentro de la etiqueta <body>

Rubencanovas · #12 (**permalink**) 04/07/2013, 21:04

He puesto el código donde me dices, pero se queda arriba, no hace el efecto de una página en blanco con la cabecera centrada, que no se vea más nada, y que justo al hacer scroll hacia abajo, se vea el menú.

He estado probado y he conseguido hacer un fondo en blanco justo en línea con el menú, pero la cabecera no he podido alinearla verticalmente al centro.

Se queda así: http://rcanovasmk.blogspot.com.es/

ArturoGallegos · #13 (**permalink**) 05/07/2013, 00:18

compañero ruben, por favor pase a este link http://librosweb.es y de una repasada a conceptos básicos de html y css...

y como comentario para que no tarde tanto en resolver su problema, los elementos no ocupan el 100% de ancho y alto si usted no se lo dice, si quiere que ocupe toda la pantalla la cabecera tiene que indicarselo, tanto ancho como alto al 100%.

Nota: no olvide que requiere previamente colocar <body> al 100% de altura.

Si de plano con esto no da con la solución, lo mejor sera contratar a alguien que lo realice por usted.

Rubencanovas · #14 (**permalink**) 05/07/2013, 08:59

No tengo ni idea, pruebo a poner el height en el header img a 100% y no me hace nada.

ArturoGallegos · #15 (**permalink**) 05/07/2013, 09:35

valla te a valido un cacahuate lo que te dije o no entendiste nada....
bien para que dejes de complicarte la vida, coloca un div y en su interior coloca un nbsp o dejalo en blanco, con CSS aplica

Código CSS:

Ver originalhtml,body{height:100%;}
#midiv{min-height:100%;background:url(mi_imagen) center center;}

y listo eso fue todo, si con eso sigues sin poder, te recomiendo leas y te documentes mucho sobre -> html y css <- (desde el inicio)
puede ser en el link que te di o en google ooooooooo bien planteate la posibilidad de contratar a alguien que lo haga por ti.

no podemos ayudarte mas aya de recomendarte material de lectura así que como iniciativa intenta buscar en google "height 100% css" encontraras ejemplos y mas información.

Rubencanovas · #16 (**permalink**) 06/07/2013, 18:03

La segunda línea que me has puesto si la he entendido, pero la primera, ¿que el body tenga una altura de 100%?

Gracias.

ArturoGallegos · #17 (**permalink**) 06/07/2013, 18:53

cuando usas porcentajes el tamaño depende directamente del tamaño del elemento padre... es decir que si el padre no tiene un tamaño definido el elemento hijo no sabe que medidas debe de tener. 100% de ??? es como decir 100% de 0 = 0....si le dices 100% de 500px = 500px

ves como si te has pasado por alto mi primer anotación cuando dije ponle 100% de alto al body.

Rubencanovas · #18 (**permalink**) 06/07/2013, 20:25

Ya lo tengo, muchísimas gracias a todos, he aprendido ya como funciona lo de los estilos y los div

Ahora me gustaría añadir un menú a la izquierda de la cabecera, ¿como podría hacerlo? ¿Con un menú como si lo pusiese arriba, como el de foros del web pero en forma de listado y en la izquierda?

¿Qué tal queda? http://rcanovasmk.blogspot.com.es/

Muchas gracias!

ArturoGallegos · #19 (**permalink**) 06/07/2013, 20:48

compañero, por favor sírvase leer los libros del link que le recomendé, allí encontrara todas las respuestas y el conocimiento necesario para seguir avanzando...

lo que pide es tan básico y esencial que se aprende en las primeras paginas de cualquier libro css... podría darle la respuesta pero a este ritmo usted no aprenderá como se debe.

aquí le dejo el link a esos libros básicos http://librosweb.es
en google puede encontrar mas, si así lo necesita.