who knows AMP (accelerated mobile page)

[venus]

I am trying to make a background image responsive ( layout="responsive") but cannot find where to put the amp-img tag since the background image is in the css ..anyone know how to do it? this is the page I am working on
https://www.landofvenus.com/testit2.html

[Colmike9]

Originally Posted by venus

I am trying to make a background image responsive ( layout="responsive") but cannot find where to put the amp-img tag since the background image is in the css ..anyone know how to do it? this is the page I am working on
https://www.landofvenus.com/testit2.html

In head:
<style amp-custom>
.img-background { background-image: url(/image.jpg); }
</style>

Html:
<pre>
<div class="img-background"></div>
</pre>

[venus]

I have that, but I need to add <amp-img src= to the image so I can add the responsive tag so it can auto resize

Originally Posted by Colmike7

In head:
<style amp-custom>
.img-background { background-image: url(/image.jpg); }
</style>

Html:
<pre>
<div class="img-background"></div>
</pre>

[Colmike9]

This should explain things, starting with "adding images"

https://webdesign.tutsplus.com/tutor...tch--cms-26158

[venus]

looked at that already, I got the images down, those were easy because they are in the body of the page, the hard part is getting an image in a table to use responsive,like the below...there is no way to make the url background an amp image that I can find.

table.example-table {
background-color: rgba(0, 0, 0, 0);
background-image: url("https://www.landofvenus.com/imagesnew/main_new_BG4.jpg");
background-repeat: repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
}

Originally Posted by Colmike7

This should explain things, starting with "adding images"

https://webdesign.tutsplus.com/tutor...tch--cms-26158