The 5-Minute Guide to Adding a Background to Your Kartra Membership

Gavin Wiener
3 min readNov 24, 2020

We all want our Kartra membership site i.e. course, to reflect our style and branding.

But styling your membership sites can be a little tricky.

You can choose from their style presets but you can only choose from a set number of colours and layouts.

Adding just a background can really improve the look of your membership site.

Before
After: Adding a background to your membership course

Unfortunately, Kartra does not allow any membership-wide styling at the moment (November 2020), but you can achieve this by adding a bit of custom code to each of the pages in your membership course.

You can also have a different background for each unit.

If you have not signed up for Kartra yet and want to explore a bit, you can get a 14-day free trial right here (this is an affiliate link, so I’ll get a kickback as a thank-you but with no additional cost to you)

Very Important Before You Start

Because Kartra does not offer membership-wide styling yet, you will have to add the Code Block described in the last steps to every module you have in your course.

So decide now if you think having a background is important enough.

Step 1 — Upload Your Image

Upload your image to your Kartra Membership Files area.

Step 2 — Get Your Image’s Link

Once you have uploaded your image, you will need a link to the image.

Click the left-most circle (highlighted with red) to view the link for your image.

Your uploaded image in your files section

Step 3 — Add a Custom CSS Block to the Lesson

In the membership editor, we’ll need to add a Custom Code block.

Don’t worry, I’ll show you the custom CSS for the block next.

Once the custom code block is added, you will need to edit it and add this CSS to it.

<style>body {
background-image: url("<the link for your image from Step 2 goes here>");
background-size: 100% auto;
background-repeat: repeat-y;
}
</style>

Important: The background-size and background-repeat will stretch your image to fit the width of the screen, but will tile the image vertically.

Otherwise, the image can become distorted if it is not big enough.

That’s it.

If you have not signed up for Kartra yet and want to explore a bit, you can get a 14-day free trial right here (this is an affiliate link, so I’ll get a kickback as a thank-you but with no additional cost to you)

P.S. Feel free to reach out if you want any help setting up your course or you have more questions.

Sign-up here to receive automation tips, case studies, and guides on the mistakes you maybe making on your automation journey.

And follow me on Twitter where I post about my journey, automation, and business growth.

--

--

Gavin Wiener

I'm a coder and freelancer from South Africa with 5+ years experience in automations, integrations and API's using Python and Django.