Simulate Slideshow Widget BACKGROUND Scheme using CSS3

[tomcadman]

I am trying to finish up some image slideshow coding using CSS3... specifically, the background behavior.

The TEST-XARA1 site is using a slideshow widget that expands the background across the browser. I want to replace the widget (using code in the placeholder) in order to have more control and forego the XARA server dependency.

Basically, I want to make this page background ... look like that page background without using the widget.


The PROBLEM: I have not been able to figure out how to expand the background via HTML/CSS3 inside a XARA placeholder. (Link to my CSS code) ... and Link to a test page containing placeholder code I use (minus the outer tags, of course) so that you can view the page source.

I have attempted to place /* background-size: cover; */ in various code positions with no avail.

Any help would be appreciated.

Thanks in advance,
-Tom

[Acorn]

Could you add html as the selector for the cover?

Acorn

[tomcadman]

Could you add html as the selector for the cover?

Acorn

Did you mean place /* background-size: cover; */ in the HTML box of the placeholder?

[Acorn]

Did you mean place /* background-size: cover; */ in the HTML box of the placeholder?

No, something like:

html, body {
background-image: url(...);
background-size: cover;

}

But I am only guessing.

Acorn

[tomcadman]

I am attempting to keep all the coding within the XARA program framework (i.e. placeholders), so there are no extra steps which involve altering the XARA generated code outside the program. It will be cleaner and easier to pass along to the next webmaster.

I am assuming this can be done, since the Xara Widget appears to be contained within the in-program placeholder.

I am hoping there is a simple solution to this.

Thanks for the input,

-Tom

[Acorn]

I have a Image Filename image hidden in my !Images layer, which I set to be a pop-up so it does not show but still publishes.

My two Placeholders have code to ensure the images is stretched to the browser width but keeps the height of the Placeholder.

CSS - Stretch to Width of Placeholder Height.xar

Basically, you wrap your <figure> tags in a<div> with ClassName fader-image

Acorn

[Boy]

Basically, I want to make this page background ... look like that page background without using the widget.

Nice website.

[Initiostar]

@ Acorn,

I had play with the XAR, but ran into trouble when I applied Scale-to-fit-Width; thereafter the placeholder would not extend to full browser width? I was thinking how would this work across variants - it wouldn't be the first time StfW has causes a conflict though.

Then I went back to the start of this thread. It does appear Xara's MX Slider can achieve the desired outcome, but the OP would prefer to remove the Xara server dependency on what is a proprietary online widget. Fair comment:

1. It is not too difficult though to find an alternative third-party slider (WOW being just one example). It works well with Xara; works across multiple variants and Scale-to-fit-Width e.g. https://initiostar.co.uk/demo/WOW/. The upside: swipe is supported which is useful for touch devices (tablet/ mobile); a great range of animations can be implemented in minutes and if one is inclined, you can edit the WOW code too. Maybe a bit clunky, but with lazy loading performance is good.

2. Should one want to avoid any third party widgets, then my first port of call would be can this be done with an embedded supersite. A supersite naturally sits within a placeholder on the page and affords the designer any number animation options. The only one niggle I've never found an answer to is how can I make this work at full browser width in tandem with Scale-to-fit-Width. A workaround, which has some real upside, is to convert the slider into a video and use a few lines of code to have it autoplay via Page HTML(body). Thereafter, you can have any number of overlays, including layered placeholders and other objects. It works across variants and with Scale-to-fit-Width: https://initiostar.co.uk/demo/VideoSlider/

Just an alternative thought.

Gary

[Acorn]

Gary, thanks for the thoughts.

I took it as a pure CSS challenge for the fun of it.
I used the Xara StfW as a convenience but could code that out as well.

I use WOWSlider as well but I strive for sleeker approaches.

Acorn

[Acorn]

For the lack of any other input, I have added:

.xr_strb {
left: -40px !important;
top: -13px !important;
}

to the Page code (head) CSS.
This sorts out the positioning issue of the banner.

I then just increased the animation total time to 140s so there is a longer delay for the last image (12) but the first image (1) repeats now get a proper look in.

Not perfect but usable.

Acorn