Jump to content

(SOLUCIONADO) PS 1605: Efecto logo ancho


Daviant

Recommended Posts

Saludos;

 

He logrado ampliar el tamaño de la imagen del logo al ancho de la pagina (recuadro rojo en la captura), pero no logro replicar el fondo para que se ajuste a la pantalla.  Se cambia el fondo de toda la pagina.

 

Alguien sabe como hacerlo??.

 

El objetivo es que se vea como una sola imagen (todo lo pintado amarillo en la captura).

 

 

De antemano muchas gracias :)

 

post-726082-0-02614200-1396360762_thumb.jpg

Edited by Daviant (see edit history)
Link to comment
Share on other sites

Saludos;

 

He logrado ampliar el tamaño de la imagen del logo al ancho de la pagina (recuadro rojo en la captura), pero no logro replicar el fondo para que se ajuste a la pantalla.  Se cambia el fondo de toda la pagina.

 

Alguien sabe como hacerlo??.

 

El objetivo es que se vea como una sola imagen (todo lo pinatado amarillo en la captura).

 

 

De antemano muchas gracias :)

Sigo sin lograrlo :(

Link to comment
Share on other sites

  • 4 weeks later...

Como lograste ampliar el ancho del logo?

2014-04-26_194043.jpg

 

Bueno, con mucha paciencia :)

 

Puedes buscar el global.css en la ruta: /themes/default-bootstrap/css

 

Aproximádamente en la linea 271 encontrarás algo asi:

 

.img-responsive {

 display:block;

 max-width: 100%;

 height:auto;

 margin: 0px auto;       <--- agregas esta línea

}

 

Y en la línea 5292 aproximádamente, busca lo siguiente:

 

header .row #header_logo {

  padding-top: 15px;

  width: 100%;   <--- Agregas esta línea

}

 

La imagen para que tome todo el ancho debe ser de 1170 píxeles y la altura la defines tu.  Siempre tratar de optimizar las imágenes para que no pesen tanto y tarden en subir.

 

Si creas una imagen .png con fondo transparente puedes lograr un efecto como el de la captura si cambias el color de fondo.

 

Antes de utilizar imagenes con transparencia (PNG) debes activar la opción en Preferencias/Imágenes/Usar PNG sólo si la imagen original está en ese formato

 

Espero te sirva, esto me lo enseñaron aqui en este foro, pero no encontré los enlaces

 

:)

Edited by Daviant (see edit history)
Link to comment
Share on other sites

  • nadie locked this topic
Guest
This topic is now closed to further replies.
×
×
  • Create New...