elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ajustar fondo en pantalla
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ajustar fondo en pantalla  (Leído 2,563 veces)
eugeniocol

Desconectado Desconectado

Mensajes: 79


Ver Perfil
Ajustar fondo en pantalla
« en: 22 Febrero 2017, 22:21 pm »

Hola buenas.

No se si es el sitio indicado ?? estoy en mis inicios haciendo mi web htlm css, la cosa no va mal pero no logro ajustar el largo de la web ni usando % o vh,tengo como fondo una foto .jpg y en todas las paginas hasta ahora creadas en la parte de abajo visto desde el pc o movil siempre me sobra ub espacio en blanco ???

Saludos.



En línea

Razzari

Desconectado Desconectado

Mensajes: 76


El que espera desespera


Ver Perfil
Re: Ajustar fondo en pantalla
« Respuesta #1 en: 23 Febrero 2017, 01:29 am »

con estas instrucciones CSS te queda full responsive para todos los dispositivos

Código:

 /* Ubicación de la imagen */
 background-image: url(miImagen.jpg);


 /* Nos aseguramos que la imagen de fondo este centrada vertical y
   horizontalmente en todo momento */
 background-position: center center;


 /* La imagen de fondo no se repite */
 background-repeat: no-repeat;


   /* la altura del contenido supere la altura de la imagen. */
 background-attachment: fixed;


 /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
    del navegador */´ç
 background-size: cover;


 /* Fijamos un color de fondo para que se muestre mientras se está
   cargando la imagen de fondo o si hay problemas para cargarla  */
 background-color: #464646;


Si todavia estas fresco en css te recomiendo empieces por lo basico
aca abajo te paso una serie de videos tutopriales para arrancar

https://www.youtube.com/watch?v=24gNhTcy6pw

una vez ya estes un poco mas avanzado podes empezar a usar librerias ya hechas como el caso de la mas conocida bootstrap, te va a hacer ahorrar mucho tiempo

Saludos espero te sirva !!  ;D


« Última modificación: 23 Febrero 2017, 01:33 am por Razzari » En línea

"Los ordenadores son inutiles, solo pueden darte respuestas" Pablo Picasso
eugeniocol

Desconectado Desconectado

Mensajes: 79


Ver Perfil
Re: Ajustar fondo en pantalla
« Respuesta #2 en: 23 Febrero 2017, 15:09 pm »

con estas instrucciones CSS te queda full responsive para todos los dispositivos

Código:

 /* Ubicación de la imagen */
 background-image: url(miImagen.jpg);


 /* Nos aseguramos que la imagen de fondo este centrada vertical y
   horizontalmente en todo momento */
 background-position: center center;


 /* La imagen de fondo no se repite */
 background-repeat: no-repeat;


   /* la altura del contenido supere la altura de la imagen. */
 background-attachment: fixed;


 /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
    del navegador */´ç
 background-size: cover;


 /* Fijamos un color de fondo para que se muestre mientras se está
   cargando la imagen de fondo o si hay problemas para cargarla  */
 background-color: #464646;


Si todavia estas fresco en css te recomiendo empieces por lo basico
aca abajo te paso una serie de videos tutopriales para arrancar

https://www.youtube.com/watch?v=24gNhTcy6pw

una vez ya estes un poco mas avanzado podes empezar a usar librerias ya hechas como el caso de la mas conocida bootstrap, te va a hacer ahorrar mucho tiempo

Saludos espero te sirva !!  ;D

En la hoja tengo ya un encabezado tipo para todas las hojas y menú a la derecha en vertical  no desplegable si no fijo, hasta aquí todo ok la pantalla se ajusta ok, el problema de ajuste de pantalla es cuando creo DIV debajo de los que ya tengo como plantilla, pro ejemplo  este:

Código
  1. *{
  2. margin:0px;
  3. padding:0px;
  4. }
  5.  
  6. div#correo{ /*DIV PARA CORREO */
  7. position:absolute;
  8.    top:250; /* Distancia de CABECERA */
  9. margin-top:auto;
  10. background:#f90;  /* Color Fondo icono F90*/  
  11. left:5vw;
  12.    width:auto;
  13. height:auto;
  14. font-family:tahoma;
  15. font-size:200px; /* Tamaño Icono200*/
  16. }
  17.  
  18. div#correo ul{
  19. list-style:none;
  20. }
  21.  
  22. .icon-mail:before {
  23.  content: "\900";
  24. }
  25.  
  26.  

y en Html :
Código
  1. <div ID="correo">
  2.  
  3.          <a target="_blank" href="mailto:eugeniocol_03@yahoo.es">  
  4.  
  5.         <div>
  6.  
  7.          <span class="icon-mail2"></span>
  8.           </div>
  9.           </div></a>  
En línea

eugeniocol

Desconectado Desconectado

Mensajes: 79


Ver Perfil
Re: Ajustar fondo en pantalla
« Respuesta #3 en: 24 Febrero 2017, 20:31 pm »

bueno el codigo que me aconsejastes me ido de momento fenomenal, pero una pregunta este signo ´ç si lo quito me sale la pantalla completa tanto en pc como en movil pero si lo añado en pc no sale la pantalla completa ????

Saludoss.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines