Revolution Slider Full Width Background

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 7 replies, 3 voices, and was last updated 11 years by RossPepperell.

Viewing 8 posts - 1 through 8 (of 8 total)

Back to forum

Posted in: Flexform
July 2, 2013 at 5:35 pm #9858

[email protected]
Member

Is it possible to have a full width (100%) background image behind a responsive revolution slider? I can actually modify the elements with Chrome Developer tools to make my current background image repeat to 100% of the page width while the actual slider remains , but I can’t find where to make these changes permanently within the theme or plugin CSS. Basically what I want is to have a revolution slider on my landing page with a 100% width background just like the other full-width elements on the page.

Thanks for your time.

Josh

July 3, 2013 at 9:23 pm #10063
Cosmin – SUPPORT
Member

Post count: 3851
Hi Josh,

I doubt the slider would work fine (don’t think it’s possible), but try this custom CSS in the General theme options:
```
.slotholder {
    background: url("http://example.com/image.jpg") no-repeat 0 0 !important;
}
```
You’d also need a pretty wide image (something like 1920px wide) to cover as many screen resolutions as possible.

Again, not sure this will work, as the slider updates dynamically and it might render this useless.

Regards,

————————————————————————————————————

Cosmin
Support Assistant
July 4, 2013 at 9:34 am #10132

RossPepperell
Member

Post count: 49

I asked the same thing… the custom css doesn’t seem to work for me.

It must be possible though, as that was one of the main draws of the flexform theme – you have a full width slider on the demo site that seems to work fine…surely the code is on there?

So it would be great to know how it can be done – also how the spacing between the navigation bar and the slider can be minimized as in the demo site.. thanks for your help

July 4, 2013 at 8:50 pm #10270

Cosmin – SUPPORT
Member

Post count: 3851

Ross, the demo site is not using this hack – we simply have a full width slider with wide images in it (at 1920px width).

Navigation spacing – maybe your logo is too tall?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

July 5, 2013 at 2:52 pm #10426

RossPepperell
Member

Post count: 49

Hi there, i tried various combinations of slider settings e.g. setting to 1920px – but the slider still does not take up the full width of the screen….

see jpgs attached….

All it does is seemingly alter the perspective of the image and text layers (it shrinks them)….the overall slider size on the screen does not change at all…

re: navigation spacing – how do i remove the ‘***theme > Home Page’ with divider between the slider and the navigation – e.g. i want to replicate the flexform theme appearance…

Thanks!

July 9, 2013 at 5:55 am #10807

RossPepperell
Member

Post count: 49

Hi there, can you reply to my query above thanks

July 10, 2013 at 8:31 pm #11089

Cosmin – SUPPORT
Member

Post count: 3851

For the slider, have you tried importing our slider demo content? That should give you exactly the same settings for the slider as we have them on the demo.

That navigation is the Breadcrumbs plugin, which you can disable to have it stop showing up.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

July 11, 2013 at 9:55 am #11141

RossPepperell
Member

Post count: 49

Great thanks
Back to forum

Posted in: Flexform