Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: eugeniocol en 22 Febrero 2017, 22:21 pm


Título: Ajustar fondo en pantalla
Publicado por: eugeniocol 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.


Título: Re: Ajustar fondo en pantalla
Publicado por: Razzari 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 (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

Título: Re: Ajustar fondo en pantalla
Publicado por: eugeniocol en 23 Febrero 2017, 15:09 pm
Cita de: Razzari 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 (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>  

Título: Re: Ajustar fondo en pantalla
Publicado por: eugeniocol 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.


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