Understanding background images

I’m building a design where I’d like to use a full-width background image just below the header. The problem is that the bottom edge of the image is a “wave” (i.e., not a straight line). I’ve tried various ways of doing this, including adding the image to both a section and a row and then playing with margins and padding, etc. I cannot figure out how to align the top of the image with the header and have the entire bottom “wave” part of the image show on all screen sizes. I’m looking for some best practices on how to work with background images, I guess. And/or specific help for this image. I can provide a link the the pages in question privately if needed.


So, I’ve figured out that I’m better off using the image element as opposed to the background. That seems to have solved my problem for now. However, I’m still interested in an article about how to use the background image options!

Hello Dannette,

Thanks for writing in!

As of now we don’t have a dedicated article for Background image. Having said that working with section background has been covered in Cornerstone getting started video and section, rows and columns article. Please take a look following video and article.

If you would like more specific tutorial on working with background image, please take a look at following video tutorial:


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