Someone mentioned relevant a reference to CSS-Tricks Perfect Full Page Background Image, but after quickly finding the video Keegan must have screenshotted in her tweet, I realised us APEX developers need to use the following instead of 'html' as our selector.
.t-PageBody--login
Update for APEX 19.2: Days after I had a discussion about limiting the references to Universal Theme (UT) classes, particularly nested ones. I find that my original extended reference of
.t-PageBody--login .t-Body
is no longer valid in 19.2 UT.As Peter suggested, it would be great to have a set of release notes to supplement the living document that is apex.oracle.com/ut.
I possibly wouldn't expect this particular example to be itemised, but knowing where to look would be great.
Plugin extraordinaire Daniel suggests
using 16:9 1920x1080 for standard UT use css media queries for different screen sizes with a pool of 2 / 3 imagesThe example I applied uses a CSS media query to not use a background image for smaller screens, as it may look too busy.
<style> @media (min-width:400px) { /* anything but mobile */ .t-PageBody--login .t-Body { background: url(#IMAGE_PREFIX#cover_images/&P101_IMAGE.) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } </style>I defined this CSS within a region so I could apply a 'dev only' build option. Alternatively, this could be a PL/SQL region, with the code abstracted/encapsulated within a PL/SQL package, possibly utilising the htp package.
Style within Region |
As an experiment, I wondered if I could rotate through a number of images, so each time someone visited the login page, they would see one image from a pool of many. So I defined an item with the following calculation:
'beauty'||floor(dbms_random.value(1,8))||'.jpg'
We can confirm an evenly distributed calculation by running that computation many times and counting the results.
select count(*), val from ( select floor(dbms_random.value(1,8)) val from dual connect by level < 10000 ) group by val COUNT(*) VAL 1413 1 1445 6 1412 2 1420 5 1411 4 1415 3 1483 7This would randomly select from a small suite of photos in the folder. I've used a selection I've collected from APOD.
And voila, an inspirational login page.
APEX Login with background cover image |
This could be the final bling you need after pimping your login page.
Don't forget, you can style the backend login, too.
Once again, thank you #orclapex community for making this a breeze.
Hello Scott
ReplyDeleteHere's the CSS I usually use for that in theme roller's custom CSS attribute.
.t-PageBody,
.t-PageBody--login {
background-size: cover;
background-repeat: no-repeat;
}
.t-PageBody {
background: url('images/background-app.jpg');
}
.t-PageBody--login {
background: url('images/background-login.jpg');
}
@media only screen and (max-width: 480px) {
.t-PageBody--login .t-Body {
margin-top: 40px; /* Add some space at the top to be able to see the background image */
background-color: transparent; /* Prevent white background on mobile */
}
}
Maxime