Can we use images in CSS background in Google AMP?
<pre>
<div style="background-image: url(assets/img/business1.jpg);></div>
</pre>
The background-image CSS property allows you to then place the image behind any HTML element you wish. This could either be the whole page (by using the body selector in CSS which targets the <body> element in our HTML), or just a standalone specific part of the page such as a section element like in the example below.
Use background-blend-mode and rgba to mix the background image and color. If you adjust the alpha value of the rgba color value (it's at . 85 in the example), you can control the transparency. Also, background-blend-mode has other values you can play with to get some really creative results.
A background image can be specified for almost any HTML element.
You can do like this :
CSS on head section
<style amp-custom>
.img-background { background-image: url(assets/img/business1.jpg); }
</style>
HTML
<pre>
<div class="img-background"></div>
</pre>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With