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

Categorías

  • Autonomous Database (10)
  • Blog (64)
  • Oracle APEX 18.1 (6)
  • Oracle APEX 18.2 (5)
  • Oracle APEX 19.1 (12)
  • Oracle APEX 19.2 (15)
  • Oracle APEX 19.2 EA (1)
  • Oracle APEX 19.2 Early Adopter (1)
  • Oracle APEX 20.1 (6)
  • Oracle APEX 20.2 (3)
  • Oracle APEX 5.0 (12)
  • Oracle APEX 5.1 (1)
  • Oracle Cloud (6)
  • Oracle Forms and Reports (1)
  • Oracle General (1)
  • Plugin AOP (2)
  • SQL Developer (6)
  • Tema Universal (1)
  • Toad for Oracle (1)
  • Toad World (2)
  • WebLogic (1)
  • Windows (2)

Entradas Recientes

  • 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!
  • Un nuevo artículo publicado en la plataforma Toad World! How to compare two schemas in Oracle using Toad®
  • Política de Privacidad
  • Términos y Condiciones
  • Política de Devolución
  • Soporte
  • Facebook
  • Twitter
All Rights Reserved © 2013 ClarTech Solutions, Inc.