Docs

[DoebankDesigns]

I’d like to have one of a variety of images load randomly as a section background whenever someone visits the homepage. I saw instructions here on how to do that: https://community.theme.co/forums/topic/random-image-on-refresh/.

Those instructions seem to be fairly specific to that site. I was wondering if anyone would be willing to help modify that code for my site. I don’t want to mess with it too much myself as I’m afraid I would break the site completely! 🙂

[DoebankDesigns]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! The code is not that specific for any site. All you need to change the image path and the directory. That’s it. Let’s follow the steps, it won’t break the site. And you can always take off the code using the FTP if you face any error.

Cheers!

[DoebankDesigns]

Okay, I followed those directions, but it doesn’t do anything. I think some of the code may need to be adjusted, but I’m not sure what.

[Friech]

Hi There,

Actually you can use that same method. But on the code instead on using the selector .x-header-landmark use a custom ID for your section to identify it. (e.g #randombg)

And then assign that ID to your section.

http://prntscr.com/d5qdau

Make sure there is no default background-image set on that section.

Take note that the background-image wont do a slide, but it will change randomly each time the page is refresh.

Thanks.

[DoebankDesigns]

Okay, I’ve got the images working, but they’re not sizing correctly. Specifically, they’re not resizing with the screen.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

#home-main {
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
}

Let us know how this goes!

[DoebankDesigns]

That didn’t change anything.

[Joao]

HI There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[DoebankDesigns]

This reply has been marked as private.

[DoebankDesigns]

Hang on…it kind of works. But not quite. I’m not actually sure what the best solution is. If you don’t mind taking a look and letting me know what might work, that would be great. I want the image to resize, but to maintain 100% of the section height.

[Friech]

Hi There,

That is possible with background-size: 100% 100%;

But that means the background-image would be squeeze/stretch on mobile view, because we can not simple fit a landscape oriented background-image on a portrait oriented screen (mobile) without forcing it.

Please read the post below on how background-size works:

– https://community.theme.co/forums/topic/section-background-image-2/#post-691126

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

Thanks.

[DoebankDesigns]

Right. Makes sense. What if we just keep the image centered? That might give me more of what I’m looking for.

[DoebankDesigns]

I think I know how to do that. 🙂 Thanks for your help!

[Thai]

If you need anything else please let us know.

[Author]

Posts