I want to use multiple images as the background in a section

Not sure if this is within your remit, but I would like to use multiple images in the background of the first section on the home page of a website.
I have tried a plugin, but it did not work at all. Could I achieve a result using code, perhaps?

  • Adam Czajczyk

    Hello Ted,

    I hope you're well today and thank you for your question!

    I assume that you'd like these images to "change", right? Usually this is achieved with some "slider" or "carousel" plugin such as for example "Slider Revolution" or "MetaSlider".

    What plugin have you tried and what issues did you experience with it?

    Some code could also be used instead but the complexity of it depends on what exactly would you wish to achieve so if you could elaborate on your goal a bit more, it would be great. A link to some example site using an effect that you need would also be helpful.

    Looking forward to your reply,
    Adam

  • Ted

    Adam,

    Many thanks for your reply.

    I have tried MetaSlider but was stumped by trying to get it to be the background of the section.

    I have installed the Ultimate Background Slider (which is supposed to attach to the page and appear as the background) but have met with no success.

    I would simply like to rotate through a collection of images (I have chosen three at the moment), on the home page in the background. All I have on top of the image (hopefully, images) at the moment is a heading and a button, but I do plan to add a smaller image on the top layer as a pointer to the latest magazine.

    The site is under development and at the moment is at test.nqdrytropics.com.au/test/

    Perhaps it would be easier to insert a bit of code to call in a slider made with a plugin?

    cheers,
    Ted

  • Adam Czajczyk

    Hi Ted

    I think you're using Divi theme, right? Divi already has a buil-in slider module that could do this, have you tried to use it?

    If you are using a "full width" layout you can put an additional row at the top of the page - instead of current header - and add the "slider" module there (not a "post slider" but "slider"). That module would let you create multiple slides where you can set a separate image for background for each slide - if you set the same text/content for each slide, you'll end up with a "rotating background" effect.

    Putting a code would be doable but it's actually more complex than it seems: the "slider/carousel" codes are based on JavaScript and a code that's not already "made for WordPress" can take quite some effort to be adjusted to work with the site and a theme. It's a custom development that'd be a bit outside the scope of this forum.

    However, if you need more help with that Divi slider module or would like to give another plugin a go, we can try to make it work together. Here's what I'm thinking: try the slider module of Divi and if you decide that you still need assistance with it, let me know and also enable support access to the site in question so I could take a look there and help you set that up.

    To enable support access make sure that the WPMU DEV Dashboard plugin is installed on site and logged in into your WPMU DEV account, then go to the "WPMU DEV -> Support" page in your site's back-end, click on "Grant support access" button there and let me know here.

    Kind regards,
    Adam

  • Ted

    Adam,

    Thank you for your insight.

    You have answered the central question I asked - ie the problem is not a small hurdle to be stepped over easily - and that will save me a lot of time and angst.

    I hadn't thought of your solution - repeating the fairly simple top layer on each image of a slider - but I had already thought of simply using a looped video of the three images as the background.

    Armed with the extra knowledge of knowing which route leads to a dry gully (naturally, it was the one I chose!!!), I will get somewhere close to where I wanted by heading off down one of the other paths still open to me.

    Thanks, the service you provide is excellent (I was a reluctant starter, but thoroughly converted now), and, undoubtedly, there will come a time in the future when I do need to hit the "Come in and help me" button on the dashboard.

    cheers,
    Ted

  • Ted

    Adam,

    I am still wrestling with this.... :slight_smile:.

    Because I want to add in a couple more bits on the top layer, the idea of simply adding the text elements to the photographs and cycling them won't work, I am afraid.

    I have tried various things, but the closest I have come to success is adding a bit of code to the heaader.php file to insert a slider. That works, but, not as a background per se, because I cannot get the subsequent header and button to sit over the top of the slider. A minus value in the top margin only results in the header disappearing under the images.

    Sorry to be a pain, but have you any ideas?

    cheers,
    Ted

  • Predrag Dubajic

    Hi Ted,

    Could you please elaborate this part a bit more:

    Because I want to add in a couple more bits on the top layer, the idea of simply adding the text elements to the photographs and cycling them won't work, I am afraid.

    What exactly are you looking to add, and why it doesn't work when you add them?
    If we had more details on what are you trying to accomplish we could assist you better, so if you have any image mockups or example sites of what the header should look like would help :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.