info@clartechsolutions.com
  • Facebook
  • Twitter
  • Facebook
  • Twitter
  • Videos Tutoriales Gratis
  • Consultoría y Desarrollo
  • Pago Seguro
  • Soporte
ClarTech Solutions Inc. | Soluciones Informáticas
  • Inicio
  • Quienes Somos
  • Libros
  • Cursos
  • Multimedia
  • Webinars
    • Galería
  • Blog
  • Contacto
  • Español
Seleccionar página

Añadir Imagen de Fondo y Logo con CSS en Oracle APEX 19.2

por Clarisa Maman Orfali Kolodoczka | Nov 14, 2019 | Blog, Oracle APEX 19.2 | 6 Comentarios

La manera más fácil de agregar un fondo y el logo en la página de inicio de sesión de APEX es usando las reglas CSS.

Actualmente tenemos la página de esta forma:

1. Vamos a cargar la imagen de fondo y el logo en nuestro espacio de trabajo desde Creador de Aplicaciones > Aplicación > Componentes Compartidos

2. Luego vamos al Diseñador de la Página del Inicio de Sesión >  CSS > Inline y abajo colocamos las siguientes reglas CSS:

span.t-Login-logo {
background-image: url(#APP_IMAGES#logo-128px.png);
backgroung-size: cover;
width: 150px;
height: 140px;
}
.t-Body {
background-image:url(#APP_IMAGES#bg-demo.jpg);
background-repeat: no-repeat;
background-size : 100%;
background-position: 25%;
}

* Podemos calcular el ancho y la altura de la imagen de nuestro logo según corresponda.

Y el resultado final es una hermosa página de inicio de sesión como la imagen destacada de este post 🙂

6 Comentarios

  1. Juan Erazo
    Juan Erazo el diciembre 19, 2019 a las 2:28 pm

    Hola Clarissa he probado de diferentes maneras y parece no funcionar en esta versión de APEX 19. He encontrado que en las características del template hay posibilidad de cambiar el fondo, lo cual es nuevo frente a otras versiones, sin embargo creo que implicaría modificar el template.

    Responder
    • Clarisa Maman Orfali
      Clarisa Maman Orfali el enero 6, 2020 a las 7:17 pm

      Hola Juan, yo lo he probado en 19.2 y puedo colocar la imagen de fondo sin problema.
      No sé que es lo que quieres hacer por lo que te da error. Saludos

      Responder
  2. Mike
    Mike el abril 29, 2020 a las 3:45 pm

    El problema es que no es .t-Body sino .t-PageBody–login

    .t-PageBody–login {
    background-image:url(#APP_IMAGES#bg-demo.jpg);
    background-repeat: no-repeat;
    background-size : 100%;
    background-position: 25%;
    }

    Responder
  3. Ulises
    Ulises el agosto 27, 2020 a las 6:59 am

    Hola,

    me funciono muy bien.

    gracias, saludos

    Responder
  4. Arturo Garcia
    Arturo Garcia el julio 16, 2021 a las 10:48 pm

    Hola Clarissa, estoy en la version 20.2 y no me esta respetando la imagen de fondo, el de LOGO si lo cambia, pero el fondo no. Alguna caracteristica de la imagen???

    Responder
    • Clarisa Maman Orfali Kolodoczka
      Clarisa Maman Orfali Kolodoczka el julio 19, 2021 a las 12:21 pm

      Hola Arturo, utiliza la etiqueta body no .t-Body, eso cambió de versión en versión.
      Saludos
      Clarisa

      Responder

Enviar comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Buscar

Entradas Recientes

  • Oracle APEX 21.1 ya está disponible para descargar!
  • Crear una Instancia de APEX en el nuevo Servicio Oracle APEX de OCI
  • Gran noticia! Disponible el Desarrollo Low-Code con el nuevo Servicio Oracle APEX
  • El script apex_epg_config.sql no se encuentra en los archivos de instalación de Oracle APEX 20.2
  • Buenas noticias! APEX Office Print (AOP) 20.3 esta listo para Descargar!
  • mayo 2021
  • enero 2021
  • noviembre 2020
  • octubre 2020
  • septiembre 2020
  • agosto 2020
  • julio 2020
  • junio 2020
  • mayo 2020
  • abril 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • diciembre 2019
  • noviembre 2019
  • octubre 2019
  • septiembre 2019
  • julio 2019
  • mayo 2019
  • abril 2019
  • marzo 2019
  • febrero 2019
  • enero 2019
  • diciembre 2018
  • noviembre 2018
  • octubre 2018
  • septiembre 2018
  • agosto 2018
  • julio 2018
  • junio 2018
  • mayo 2018
  • abril 2018
  • marzo 2018
  • febrero 2018
  • enero 2018
  • diciembre 2017
  • noviembre 2017
  • octubre 2017
  • septiembre 2017
  • agosto 2017
  • junio 2017
  • mayo 2017
  • abril 2017
  • marzo 2017
  • febrero 2017
  • enero 2017
  • diciembre 2016
  • noviembre 2016
  • octubre 2016
  • septiembre 2016
  • agosto 2016
  • junio 2016
  • mayo 2016
  • abril 2016
  • marzo 2016
  • febrero 2016
  • enero 2016
  • diciembre 2015
  • noviembre 2015
  • octubre 2015
  • septiembre 2015
  • agosto 2015
  • julio 2015
  • junio 2015
  • mayo 2015
  • abril 2015
  • enero 2015
  • diciembre 2014
  • noviembre 2014
  • octubre 2014
  • septiembre 2014
  • agosto 2014
  • julio 2014
  • junio 2014
  • mayo 2014
  • abril 2014
  • marzo 2014
  • febrero 2014
  • enero 2014
  • noviembre 2013
  • octubre 2013
  • julio 2013
  • junio 2013
  • abril 2013
  • febrero 2013
  • enero 2013
  • diciembre 2012
  • noviembre 2012
  • octubre 2012
  • septiembre 2012
  • agosto 2012
  • julio 2012
  • junio 2012
  • mayo 2012
  • abril 2012
  • marzo 2012
  • febrero 2012
  • enero 2012
  • diciembre 2011
  • noviembre 2011
  • septiembre 2011
  • agosto 2011
  • julio 2011
  • junio 2011
  • mayo 2011
  • abril 2011
  • marzo 2011
  • Política de Privacidad
  • Términos y Condiciones
  • Política de Devolución
  • Soporte
  • Facebook
  • Twitter
All Rights Reserved © 2013 ClarTech Solutions, Inc.