Many plugins allow you to customize forms by adding a background image, but I know many ConvertKit users who use the ConvertKit plugin or would just rather keep all the form creation within their account. I don’t blame you if that’s you! I hate unnecessary plugins. Below I will show you a super simple way to add a background image to a ConvertKit form via CSS.
Here are two examples:
Full Form
Minimal Form
Step 1: Your Image
The first thing you’ll need to do is upload your image. If you already have the image hosted on your website and you know how to grab the URL, you can use that. Otherwise, you can upload the image into the description box of the ConvertKit form, then grab the URL in the HTML code, as shown highlighted in the image below. You can remove the image after grabbing the URL then.
Step 2: Add the CSS
Next, you’ll need to add the CSS code below to the form’s custom styles under Settings –> Style –> Custom CSS. Be sure to replace the image URL with your URL from Step 1.
.ck_form {
background-image: url('https://convertkit.s3.amazonaws.com/assets/pictures/13209/1362271/content_DeathtoStock4.jpg') !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
border: none !important; }
Step 3: Adjusting the Background (optional)
Everyone will have a different image they are uploading and the image position will depend on the size and image contents. The code above is the easiest option and fits the entire width of the image and centers it, but if your image’s focus is at the top or bottom, you might need to position the image differently. Example below:
background-position: center !important;
background-position: bottom !important;
Notice how in the 2nd image, the background’s focus is showing? Depending on your image, you may need to make some adjustments. The options for background-position are: top, bottom, left, right, center.
Comments