Blog > Versoly

How to Add a Background Image to Versoly Header Sections

Posted by Paul Carl Gallipeau | Apr 13, 2020

Card image cap

In this article I'm going to teach you how to create header sections with background images in Versoly. You can watch the video I made for this post or follow the steps and screenshots below. 

The first step is uploading your image and finding its URL. You can do this by adding an image (or replacing an image) with the one that you'd like to use for your background. Once you've done that, open the code panel to find the URL of the image and copy/paste it somewhere convenient to use in the next step.


Next you need to click on the CSS tab and create a custom class by copy/pasting the code below:

background:linear-gradient(rgba(45, 52, 54,0.75), rgba(45, 52, 54,0.75)),url('#');background-repeat:no-repeat;background-size:cover;background-position:center;

You can customize the RGBA values to whatever color and opacity that you want to use for the background. I personally love using to find colors and you can even have it copy/paste them for you in RGBA format.

I also recommend customizing your images positioning. For example, if part of the image is cut off on mobile and you'd prefer it to cut off the bottom (instead of the top and bottom) or vice versa, you can have the background position set to the top center (to have the cutoff happen to the bottom of the image) or to bottom center (to have the cutoff happen to the top of the image). You can also replace center with left or right for even more control.


The next step is adding the CSS class that you just created to your section's HTML. Click on the HTML tab in Versoly and scroll to your header section to find the code you need to edit. If you only see a few lines of code then you need to click on the section because you probably only have one element selected (which limits the amount of code you're shown in the editor).

In the example image below, you'll see that I had to replace bg-transparent with our new class, bg-hero. You may not have any class for your background so you might not have to delete anything. If that's the case, just type in the bg-hero class.


Now that the code is done, you can change the color of your text and delete any unnecessary elements that are left in your header.


Now the final step is to center your elements. Look for the class highlighted in the screencap below. That div controls the widths of the columns.

Versoly is built using Bootstrap which is a CSS framework that uses a 12 column gridsystem. The element in the example is only taking up about 42% of the screen because the class col-xl-5 tells the div that our content is in to only occupy 5 of the 12 columns (5 divided by 12 is about 42%). We can change every number in each col- class to 12 to have our content use the full width.

In this example, we change <div class="col-md-12 col-lg-6 col-xl-5"> to <div class="col-md-12 col-lg-12 col-xl-12"> With that change made, you're all set! You might just need to set the text to be centered for each text element and button in your header.


If you have any questions or want to see other Versoly guides, please contact me and let me know! I also offer free 30 minute digital marketing consultations if you have projects that you would like help with.

Get updated when new articles are published.

Thank you for subscribing. You're in!

Please try again

Popular Posts

Get updated when new articles are published.

Thank you for subscribing. You're in!

Please try again

You might also enjoy

Card image cap


5 Search Engine Optimization Tips for Normal People: One Post's Road to Greatness

Sometimes the best thing you can do for your website's SEO is just create badass content and be patient, then think about SEO later. I'm going to share a story with you to illustrate these five search engine optimization tips...

Posted by Paul Carl Gallipeau | Mar 26, 2017