[Jrhartley1Participant]

Hi, I’m trying to create a website with one image in the background and sections that scroll over the top. Please see the attached image of a mockup. Essentially I want a tall building with sections over the top. There will be about 5 sections in total, and each section I’d like to completely fit the viewers page until they scroll down.

I’ve been trying to implement this but I run into a number of issues;
Either the individual background images to each section don’t line up when the page is scrolled
OR
If I choose a background for the theme then it doesn’t scroll.

Please can you help me?

Thank you

[Jrhartley1Participant]

Sorry not attached. It is now.
I should add also that I want the viewer to scroll down the building as they go down the website. So first page will be looking at the top of the building, last page will be at the base.

[Jrhartley1Participant]

This reply has been marked as private.

[Jrhartley1Participant]

Sorry. After many hours looking at this, I’ve found how to do this on a slider for each section. Take a look at the site anyway. Where the menu is, can you place that above section 2 slider rather than in between the first and the second as it’s throwing off the image.

Thanks

[RadModerator]

Hi there,

Thanks for posting in, would you mind providing your site’s URL as well? 🙂

Thanks!

[Jrhartley1Participant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the link. Upon checking your site I am a little confuse on what you really want to achieve. Can you give us detailed description so we can help you better? I am not sure about this: Where the menu is, can you place that above section 2 slider rather than in between the first and the second as it’s throwing off the image..

Regarding background like a slider:http://demo.theme.co/integrity-4/ please. That is not really a slider but rather just several background images that have been added to the page with a fade effect. You can do the same by editing your home page, and adding some background images to it.

If this doesn’t help, a screenshot would help so we can see what you are trying to achieve.

[Jrhartley1Participant]

Sorry. To clarify;

I spent time making the building image work down the entire site, and I did this with 4 sliders with the background image on each.

However, the issue now is that it is difficult to put content in front of each section. I have to do it with layers on the slider. (As you can see I have started to do this already).

Is there a better way, where I can maintain the sections and elements in Cornerstone but still see the building background?

David

[ChristianModerator]

Hey David,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks for understanding. Take care!

[Jrhartley1Participant]

I understand. Is it possible to achieve this background then using Cornerstone? If I put a piece of the building in each section’s background will that work, or will it cause scaling issues?

[Jrhartley1Participant]

I mean using cornerstone, as opposed to slider revolution that I am currently using to make up each section…

[JoaoModerator]

Hi There,

You need to test it.

I am not sure if cutting the image in many slices would be the best Technic (but maybe could be!). I would try to put this image as a section background and have different rows on top, alternating, one with a transparent background and other with a black background with opacity.

Let us know your thoughts.

Joao

[Jrhartley1Participant]

Hello,
Thanks. I’ve done this now. Would you be able to log in and take a look at the homepage? It’s at the bottom (there are now 2 buildings – the original and this new layout).

Each image for the section is 1900 x 1000 pixels. I’ve put each image as a background and created a ‘Gap’ element with a 1000px to show the image. If I then start to populate other content, i.e. text / images etc the background image starts to zoom in – I presume because of the gap. Is there a way to set each section to be the full screen or 1000px depth within the CSS rather than using a gap?

Thanks
David

[Jrhartley1Participant]

If there’s a more appropriate size for the images to allow the scaling then I can change that…

[JoaoModerator]

Hi there,

Please set your spacing using the padding of the row instead of a gap element, this way you can add content on it.

The gap as it is as element itself won´t allow you to add any elements on top if it.

Please see image 1 attached.

In order to create a dark layer on the rows you can add the folowing code to the Style Box of each Row you want the effect:

background-color: rgba(1,1,1,0.5);

Please see image 2 attached:

Hope that helps

Joao

[Author]

Posts