Can we use images in CSS background in Google AMP?
10,167
Solution 1
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>
Solution 2
AMP does not support inline styles (like your example), but you could add a background-image by implementing styles the proper way in a <style amp-custom> tag in the <head>.
Read more here: Supported CSS - AMP
Related videos on Youtube
12 : 30
Compleat CSS Background Property (Background size, repeat,clip,attachment,origine) | CSS Tutorial:21
11 : 19
HTML & CSS for Beginners Part 13: Background Images
16 : 42
Controlling background-images | CSS Tutorial
05 : 43
Full Screen Background Image with HTML CSS | Responsive Full Page Background Image CSS
12 : 47
CSS Background-image
20 : 19
Background images with HTML & CSS
02 : 52
When to use HTML image tag vs CSS background image
01 : 25
HTML : Can we use images in CSS background in Google AMP?
01 : 00
Can we use images in CSS background in Google AMP - HTML
Author by
Rakib Uzzaman
Updated on June 04, 2022Comments
-
Rakib Uzzaman almost 2 years
Can we use images in CSS background in Google AMP?
<pre> <div style="background-image: url(assets/img/business1.jpg);></div> </pre> -
Tamil Selvan C over 6 yearsHow to display background image for dynamic loop content. eg display posts
-
Bachcha Singh over 6 yearsYes, you can achieve. In loop you have to create unique class and css in head section for same class -
Jim S over 5 yearsI am trying to use this method and I want the image to fill the width of the screen and then have the height be calculated so the aspect ratio is 16 x 9, as can be easily done with an amp-image. How do I get the div the right size? Should I use an amp-img, and then position my text on top using 'position:absolute'?
