Hi Is there a way to use Target Show/Hide Layer and Sequence timer action in a responsive site. I’ve almost got there using background images but as soon as I set the height to be flexible the images disappear. I want the images to respond smoothly like http://www.tipiwales.co.uk Hero Image but go through a sequence of images.
I just answered this approximate question last week. Here’s the recipe:
A background image cannot influence the height or width of an object it is applied to, so you’ll have to use a different trick to make your image appear to flex like you want. One of the best tricks for this is to work out the percentage difference between the width and the height (the aspect ratio) and then apply that to the padding-bottom of the box, leaving the height at 0 or unspecified. Let’s say your image had a 4:3 ratio, like an old TV. To get that in a flexible image, you would use the following CSS:
If you resize the screen, you’ll see that it flexes to show the appropriate height for any given width (depending on the surrounding elements and viewport).
On Dec 29, 2018, at 10:14 AM, agallagher email@hidden wrote:
Hi Is there a way to use Target Show/Hide Layer and Sequence timer action in a responsive site. I’ve almost got there using background images but as soon as I set the height to be flexible the images disappear. I want the images to respond smoothly like http://www.tipiwales.co.uk Hero Image but go through a sequence of images.
I think you’ll have to show me an example of what you’re trying to do before I can figure out what you mean. Or maybe I need another cup of coffee…
Another point: terminology is incredibly critical when you’re talking about styling web pages. A “background image” is one, very specific thing. Any element on the page (or the page itself) may have a background image. Those are styled with CSS:
#some_element {
background-image: url(path/to/image.jpg);
background-position: center center;
background-repeat: no-repeat;
}
You may be referring to an image that you drew on the page and moved to the “background”. That’s an image <img src="path/to/image.jpg" >, not a background image.
Walter
On Feb 26, 2019, at 9:19 AM, agallagher email@hidden wrote:
Hiu Walter
Thanks for the response, which I only just found.
That sounds perfect but how would I apply that to several background images in one container on top of each other.