Add Background Image and Logo in CSS for Oracle Apex

So you have got your Oracle APEX instance up and running and you want to customize your first app. The easiest way to add logo and background image to your login page is by using CSS

1. Upload the Image to your Workspace from App Builder > App > Shared Component

2. Go to Page Desginer >  CSS > Inline and Add Below Code

span.t-Login-logo {
background-image: url(#WORKSPACE_IMAGES#whitehat.png);
backgroung-size: cover;
width: 150px;
height: 140px;
}

## You can work out the Width and Height of your logo image accordingly
If you want to add a background to the login page as well..Then you can include above code along with background image code. So the total code in Inline CSS would look like below :

span.t-Login-logo {
background-image: url(#WORKSPACE_IMAGES#whitehat.png);
backgroung-size: cover;
width: 150px;
height: 140px;
}
.t-Body {
background-image:url(#WORKSPACE_IMAGES#sydney_opera_house_australia-wallpaper-1920x1200.jpg);
background-repeat: no-repeat;
background-size : 100%;
background-position: 25%;
}

For Apex 19.2+ :

.t-PageBody--login .t-Login-container {  background-image: url(#APP_IMAGES#Zoom-Autonomous.png);  background-position: center center;  background-repeat:  no-repeat;  background-attachment: fixed;  background-size:  cover;  background-color: #45484d;  background-color: -moz-linear-gradient(top, #45484d 0%, #000000 100%);  background-color: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);  background-color: linear-gradient(to bottom, #45484d 0%,#000000 100%);}

And the end result is a beautiful login page like below