FullBackgroundEffect
Stable Version 1.0.0
Published on 28 March 2017 by 
Created on 28 March 2017
Details
Fills a background image that covers the entire browser window at all times.
Read More

Fills background image on a website that covers the entire browser window at all times. Let's put some specifics on it:


Fills entire page with image, no white space

Scales image as needed

Retains image proportions (aspect ratio)

Image is centered on page

Does not cause scrollbars

As cross-browser compatible as possible

Isn't some fancy shenanigans like Flash



Works in:


IE7+ (could probably get in IE6 with a fixed position shim)

Most any other desktop browser



Credits to:


https://css-tricks.com/perfect-full-page-background-image/

What’s new (1.0.0)

Initial version

Reviews (0)
Category
UI & Widgets
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Daniel Martins who created this component.
Dependencies
FullBackgroundEffect has no dependencies.
Requirements
Platform
10.0.0.402
Database
All
Stack
All
Component Consumers
FullBackgroundEffect has no consumers.
Weekly Downloads 
Related Components
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
7375
Google Maps
Labs
Google Maps is a Google Maps Javascript V3 API component, providing Web Blocks and Actions to add interactive maps, markers and directions, along with event driven functionality.
10744
OutSystems UI Web
OutSystems R&D
Create amazing web responsive applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
1294
More from Daniel Martins
Stagings
Staging Team
Displays the entire history of deployments performed through LifeTime. Uses the Platform SDK to get the list of deployments. Install it on your LifeTime environment.
127
Headroom
Daniel Martins
Give your pages some headroom. Hide your header until you need it.
Blazy
Daniel Martins
What is bLazy? bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.