Can we use images in CSS background in Google AMP?
Question
Can we use images in CSS background in Google AMP?
<pre>
<div style="background-image: url(assets/img/business1.jpg);></div>
</pre>
3 answers
solution1
6 2017-08-22 12:50:09
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>
solution2
1 2017-08-18 16:14:19
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
solution3
0 2019-03-04 18:07:48
You can also mimic the behavior of a background image by creating a container with position: relative that wraps the amp-img and the content and make the content position: absolute and have it cover the dimensions of the amp-img like so:
.wrapper { position: relative; width: '1200px'; height: '700px'; } .content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
<div class="wrapper"> <amp-img src="https://www.variety.org.au/sa/wp-content/uploads/2016/06/placeholder.png" width="1200px" height="700px" layout="responsive"></amp-img> <div class="content"> <h1>My Content </h1> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.