Okay
  Public Ticket #183817
Nectar slider preload background
Closed

Comments

  • Ant started the conversation
    March 22, 2014 at 2:32pm

    Hi there,

    I'm using 3 videos with the Nectar slider and unsurprisingly the load is slow. Is there a way to change the background to an image rather than a solid colour with a diagonal line?  I'm thinking of using the 'Preview Image' of the first slide as the slider background, would this work?

    Thank you

  •  9,011
    Tahir replied
    March 22, 2014 at 5:05pm

    Hey Ant!

    Yes there is an image background option in the nectar slider settings .

    Thanks

    ThemeNectar Support Team 

  •   Ant replied privately
  •  9,011
    Tahir replied
    March 25, 2014 at 10:10pm

    Hey Ant!

    Please see screenshot: http://prntscr.com/341h4y . 

    Thanks

    ThemeNectar Support Team 

  • Ant replied
    March 26, 2014 at 2:56pm

    Hi Tahir,

    Doesn't work for me. I have set a background for the 3 slides which are shown on mobile/tablet but the video preloader is still a colour with the diagonal lines.

    Please advise

  •  9,011
    Tahir replied
    March 26, 2014 at 3:05pm

    Hey Ant!

    I think we both are talking about different things. You are talking about backgrounds as well as the video preloader. Can you please specify how exactly it is right now and what you wish to achieve with what.

    If its something more then simple css and require's some custom development. We would suggest you head on over to microlancer which is a service from Envato that offers paid WordPress customizations. 

    Thanks

    ThemeNectar Support Team 

  • Ant replied
    March 26, 2014 at 3:23pm

    Hi Tahir,

    It is a tad confusing and I'm sorry if I've made this more complicated that it needed to be. 

    If you head over to http://flowinnature.com.au/ you'll see the dark grey background with diagonal lines during the preload that I'm referring to.I'd like to use a still version of the blue water as the background (happy to keep the spinny preloader thingy) so that if a user is experienceing an issue with the load speed, there's something relevant rather than a colour and lines that doesn't look very good. 

    Does this make sense? I presume this is CSS thing. I would want the chosen picture to react exactly the same (responsively) as the video if possible. 

  •  9,011
    Tahir replied
    March 27, 2014 at 5:19pm

    Hey Ant!

    This is the css that is being used right now, you can simply change the background url and add it in the custom css panel

    div.nectar-slider-loading {
	background-color: #393939;
	background-position: center;
	background-repeat: no-repeat, repeat;
	background-image: url('img/icons/nectar-loading.gif'), url('img/textures/diagonal_line.png');
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

    Cheers

    ThemeNectar Support Team 

  • Ant replied
    March 31, 2014 at 1:39pm

    Thank you

  •  1
    LuckyTiger replied
    May 31, 2017 at 9:22pm

    Hi Tahir,

    Thanks for this code. Just wondering if there is a way to force the background image to be full width, i.e.,  the same size as the background video in the nectar slider. I am trying to use the first frame of the background video as my background image so once the video loads it is seamless.


    Thanks,


    Marc

  •  9,011
    Tahir replied
    June 1, 2017 at 12:31pm

    @lucky,

    No i am afraid we its not possible given the html markup .

    Thanks

    ThemeNectar Support Team