can't solve image BG revolution slider problem

[chryseis]

Hi ,

I’ve tried everything for two days now but I can’t figure out what is wrong.
I want to put an image background on revolution slider but my image appears cut. I have half of it when I preview the page. I don’t know what to do.
I tried different size of pictures, I tried, full width, responsive, fixed option, I tried to create a page with a rev slider parent template and another with default template and adding the rev slider module. Still my picture does not appear entirely in my slider..

Please have a look at the picture I sent with that message.

Can you help me fix this? I need to put that picture for a client and I can’t either put it as a image layer because the max width of my picture is 845 and the slider is 950 so I need the picture to be a background image…

Kind regards,

[Cosmin – SUPPORT]

Hi,

I don’t think it’s possible to control background images from Revolution Slider (it stretches them to cover the whole area), but I’m thinking of 2 things:

1) If that image is made in Photoshop, try editing it and having a 950px wide image, with more of the brown gradient on the sides.

2) Leave a link to that page – I want to test if we can do a hack with some custom CSS. Not guaranteed it will work, but I’ll do my best.

Regards,

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

Cosmin
Support Assistant

[jmichaelk]

another issue, seemingly related, is that the container around the slider images doesn’t seem to show fully (so I’m not seeing the shadow underneath). I have my images sized to 960…. is that too big? In other words, do I have to reduce the size of the background image to allow for the outer portion to show? I know it’s there, because when I preview the slider (From within the revolution plug-in admin), the proper shadow appears and the bullets also appear properly. But when I go to preview it on my site, it does not quite correspond.

Thanks!

[Cosmin – SUPPORT]

@jmichaelk – depends on which slideshow you’re using. If it’s full, then it wouldn’t show the shadow like the previewer does in the dashboard. Can you share a link to that page?

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[jmichaelk]

Thanks Cosmin. It’s definitely set to responsive, and my background images span 960 x 350. The build site is http://wscah.perceptuate.com/ — I really appreciate you taking a look. Also, I’m not sure if it’s helpful, but I’ve attached a screenshot of the slider settings.

[Cosmin – SUPPORT]

Thanks for the link 🙂

Add this custom CSS in the theme options:

.wpb_showcase_widget {
    margin-bottom: 40px;
    overflow: inherit !important;
}

That should fix it.

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[jmichaelk]

That definitely worked, though I forgot to mention, the buttons seem to be too close to the edge, as compared to the way it looks in the preview when working in the Revolution tool. Also, I noticed that in Safari, when hovering just outside to the right and left of the buttons, there’s a noticeable flickering of the buttons, appearing both inside and outside the frame of the slider. Thanks again, sorry for all the back and forth.

[Swift Ideas – Ed]

Hi there,

Add this to the custom css box within theme options:

.tp-leftarrow.default, .tp-rightarrow.default {
background: transparent url('../images/showcase-nav.png') no-repeat 100% 0;
width: 30px;
height: 36px;
}
.tp-rightarrow.default {
background-position: top right;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tp-leftarrow, .tp-leftarrow.large, .tp-leftarrow.square, .tp-leftarrow.round, .tp-rightarrow, .tp-rightarrow.large, .tp-rightarrow.square, .tp-rightarrow.round, .tp-leftarrow.default, .tp-rightarrow.default {
				background-image: url('../images/[email protected]');
				background-size: 60px 36px;
			}
}

– Ed