Adding a background image to an APEX page can enhance the user interface and make the application visually appealing. This can be done using CSS, Static Application Files, or inline styles.
Below are multiple approaches to accomplish this in Oracle APEX.
1. Using CSS to Set a Background Image
The most efficient way to apply a background image is by using CSS.
Steps to Add a Background Image via CSS
Open Oracle APEX Page Designer.
Select the Page Attributes section.
Scroll down to the CSS section and find Inline CSS.
Add the following CSS code:
body {
background-image: url('&APP_IMAGES.background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Click Save and Run the page to see the background image.
Explanation of CSS Properties:
background-image: Specifies the image to be used.
background-size: cover: Ensures the image covers the full page.
background-repeat: no-repeat: Prevents the image from repeating.
background-attachment: fixed: Keeps the background image static when scrolling.
background-position: center: Centers the image on the page.
2. Using a Static Application File for Background Image
If the image is stored in APEX under Static Application Files, reference it dynamically.
Steps to Upload and Use a Static File
Navigate to Shared Components > Static Application Files.
Click Upload File, select the image, and upload it.
Copy the file reference URL from the uploaded file.
Apply the CSS in Page Designer under Inline CSS:
body {
background-image: url('#APP_FILES#background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
APEX will dynamically replace #APP_FILES# with the correct image path.
3. Setting Background Image via Page Templates
If the same background image should be applied to all pages, update the Page Template.
Steps to Modify Page Template for Background Image
Open Shared Components.
Click on Themes and choose the theme in use (e.g., Universal Theme).
Select Page Templates.
Edit the Standard Page Template.
Find the <body> tag inside the Template Definition.
Add the following inline CSS before </body>:
<style>
body {
background-image: url('&APP_IMAGES.background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
Save changes and apply them to all pages using the template.
4. Using JavaScript to Dynamically Change Background Image
If the background image should change dynamically based on user actions, use JavaScript.
Steps to Change Background Image Using JavaScript
In Page Designer, navigate to Page Attributes.
Under Execute when Page Loads, add the following JavaScript:
document.body.style.backgroundImage = "url('&APP_IMAGES.dynamic_background.jpg')";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundRepeat = "no-repeat";
This script changes the background when the page loads.
5. Changing Background Based on Page Conditions
To change the background based on specific page numbers or conditions:
Go to Page Designer > Execute when Page Loads.
Add the following JavaScript:
if ($v('P1_USER_ROLE') === 'Admin') {
document.body.style.backgroundImage = "url('&APP_IMAGES.admin_background.jpg')";
} else {
document.body.style.backgroundImage = "url('&APP_IMAGES.user_background.jpg')";
}
This changes the background dynamically based on user roles.
Displaying a background image in Oracle APEX can be done using CSS, Static Application Files, or JavaScript. The best approach depends on the application requirements. Using CSS is ideal for static backgrounds, while JavaScript is useful for dynamic changes based on conditions or user interactions.
EXAMPLE:
Step 1 – Click on the image from Shared Components > Static Application Files
Step 2 - Copy the reference value
Your reference should look like this:
#APP_FILES#JayGeeMarketplace/JayGeeMarketplaceReactive.JayGeeComplex.jpg
Step 3 – Go to the “Page” level of the page and change the inline CSS
Code:
#t_PageBody {
background-image: url(#APP_FILES#JayGeeMarketplace/JayGeeMarketplaceReactive.JayGeeComplex.jpg);
background-size: 100% Auto;
}
Should look like this:
