FreewayTalk

3 replies to this thread. Most Recent

agallagher

29 Dec 2018, 3:14 pm

Target ShowHide Layer Action

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’ve used these actions loads of times but not as responsive. e.g. http://www.maroonedhaircutters.co.uk

Just want to know if I’m trying to do the impossible, any alternative methods appreciated.

Cheers

Anthony

http://anthonygallagher.co.uk/cups/barrestaurantmen.html

Thanks Anthony

waltd

29 Dec 2018, 4:51 pm

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:

.tv {
   width: 100%;
   height: 0;
   padding-bottom: 75%;
   background-image: url(test-pattern.jpg);
   background-size: cover;
   background-position: center center;
}

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).

http://scripty.walterdavisstudio.com/tv.html

Walter

On Dec 29, 2018, at 10:14 AM, agallagher <[email protected]> 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’ve used these actions loads of times but not as responsive. e.g. http://www.maroonedhaircutters.co.uk

Just want to know if I’m trying to do the impossible, any alternative methods appreciated.

Cheers

Anthony

http://anthonygallagher.co.uk/cups/barrestaurantmen.html

Freeway user since 1997

http://www.walterdavisstudio.com

agallagher

26 Feb 2019, 2:20 pm

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.

Thanks Anthony

Thanks Anthony

Back to Top

waltd

26 Feb 2019, 3:28 pm

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 protected]> 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.

Thanks Anthony

Freeway user since 1997

http://www.walterdavisstudio.com