CSS Background images

Search…
​Background images are often used for hero banners or in cases where you need to put content on top of an image.
Below is a simple example of a hero banner:
1
<style>
2
    .hero {
3
        height: 600px;
4
        background-image: url("https://yoursite.com/hero.jpg");
5
        background-size: cover;
6
    }
7
</style>
8
​
9
<div class="hero" >
10
    <div class="content">This text is displayed on top of the image.</div>
11
</div>
Copied!
In this example, we created hero banner and using "background-image" CSS rule to setup an URL for the image.
Using this library, you can optimise this image and also make it responsive. The syntax is exactly the same as for responsive images, but instead of using data-pb-picture attribute you should use data-pb-background:
1
<style>
2
    .hero {
3
        height: 600px;
4
        background-size: cover;
5
    }
6
</style>
7
​
8
<div class="hero" 
9
    data-pb-background=""
10
    data-url="https://yoursite.com/hero.jpg"
11
    data-lg="optimise"
12
    data-md="resize?size=990"
13
    data-sm="resize?size=640">
14
</div>
15
​
16
    <div class="content">This text is displayed on top of the image.</div>
17
</div>
Copied!
The snippet above renders 3 different sizes for different devices. We don't need background-image CSS rule anymore as it created by the library.
You can kick off optimisation by calling background() function or use autoload:
1
window.Pixboost.background({apiKey: 'API_KEY'})
Copied!
Lazy loading is supported for background images as well.
Not responsive images
Lazy Loading
Last modified 1yr ago
Copy link