[SOLUCIONADO] Imagen fullscreen

[moscrates]

Hola

Otra vez me encuentro con la necesidad de acudir a ustedes con este tema de los css el cual no se me da del todo.

la idea es:

[/url]


la parte azul es un menu que ya tengo (<header>)

la parte naranja debe de ser una imagen (<section>)
que ocupe todo en full screen, por la que utilice esto

Código CSS:

body {
  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}
 

lo cual se acopla bien al body pero a la section

pero el problema principal son lo cuadros rojos
que no tengo idea de como ponerlos
son imagenes (gif) de deben de ir por encima de la otra ( area naranja)
y que se mantengan en su lugar cuando el tamaño de la pantalla cambie.

cualquier ayuda se los agradezco, una liga una breve explicación, un ejemplo sencillo, una pista para investigar.

saludos

[AngelKrak]

amigo en vez de agregarle la imagen al Body, ponla en <section> y ponle height: 100vh y para las imagenes (gif) puedes hacerlo mediante Position: relative y mediante margin's vas modificando donde quieres que esten esas imagenes gif's

[shadakian]

Si quieres que se adapte a <section>me da la sensación que simplemente te estás equivocando de etiqueta... ¿Has probado ya esos estilos en section{...} en lugar de body{...}?

[moscrates]

hola colegas y gracias por contestar
he probado poniendo el estilo a section, pero no se queda o se crea scroll y me gustaria que mantega el
height de la resolucion de la pantalla del usuario

[AngelKrak]

mira amigo, es algo como lo que quieres no:

http://codepen.io/AngelKrak/pen/wKByGV

[xfxstudios]

podrias hacer algo como:

Código CSS:

html, body{
heigth: 100%;
}
 
.contenedor{
heigth: /*Porcentage restante de sobre la medida del header o menu*/80%;
background-image: url(/*ruta de la imagen*/);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
 

eso lo uso mucho sin problemas y me da el resultado deseado, visita esta pagina para que veas el resultado de ese nuevo diseño que estoy haciendo

[moscrates]

Si exacto es justo lo que buscaba para el fondo, ahora los cuadros rojos, ya los puedo posicionar por encima de la imagen de fondo lo que me queda hacer es que se mantengan en la posiciona en la que están o que se hagan pequeños cuando cambie la pantalla

[moscrates]

el fondo echo, los cuadros rojos flotantes echos, el problema ahora es el diseño responsivo de los cuadros rojos, conocen un método para hacerlos responsivos sin tener que hacer un media query por cada 30 px,

digo 30 px, por que el fondo digamos es una imagen de una granja y los cuadros rojos animalitos, entonces debe haber un aniamalito en el tejado de la granja otro en la puerta, uno parado en el piso etc... cuando cambia el tamaño d ela pantalla (reposive) el fondo se adapta pero los animalitos no he buscado como, se quedan volando en el espacio