Recommended Structure for Continuous background image

Support
#1

Hi team,

I’m working on a new site and want to create a detail in the background of a doodle line that works it way down the page continuously through sections, and changing color when it goes from a light to a dark section. See attached screenshot. Can you recommend what structure you would use to achieve this look?

image
image1009×1876 327 KB

Thanks,
ashley

#2

Hey Ashley,

Thanks for writing in! The easiest way is to create an image that has the doodle line. The image will be used as a upper-layer background image to a Section element. The lower layer will have a solid color. For more tutorials about background layers, please check this out:

Best Regards.

#3

Thanks Rue Nel! Is there a way to achieve the continuous line that can change color between the sections (how the line in the screenshot does below “tiffany” and into the questions section), that would be responsive?

#4

Hi Ashley,

Unfortunately, there is no such way to achieve what you are expecting.

Thanks

#5

I can think of two possibilities , but I’m not sure what is the best way or if there is a way that I haven’t thought of.

  1. rather than have sections, i just have one section and each portion in the screenshot above that appear to be a section would be a full width row. then i could use the background layer effect like rue nel said.
  2. could I set a SVG as as a site wide background image and then target it to change the color with custom CSS as the sections change? If so, can you please give me some information about how to successfully utilise SVG’s with PRO. I have tried in the past by allowing the mime type and using an SVG plugin but I could never get it to work.
  3. are there any other ways?

Thoughts?

Thank you!

#6

Hey Ashley,

You can go with the Idea #1. That is the easiest way as long as you have that doodle line in one transparent image.

Thanks.

#7

Thanks! This is going to be a one page website to start with. Normally to navigate a one page website, you assign a class to the section and make this the link of your button…can i do the same, but with rows?

#8

Hey Ashley,

Yes, it would be possible to assign an ID for each Row element.

Thanks.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.