CSS Background images
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.1
window.Pixboost.background({apiKey: 'API_KEY'})
Copied!
Lazy loading is supported for background images as well.
Last modified 2yr ago
Copy link