Stylish CSS or SVG background with WordPress

A great background doesn’t always have to consist of rigid images. I’ll show you how to use a stylish CSS background with the advanced Kadence Blocks. Without any additional page builder or plugin.

What you need

For the implementation of this tutorial you do not need any paid plugins or services, but only

While I use the Kadence Theme, it also works every other.

SVG Tools and Generators

First of all, you need a cool background. On the web, these are usually referred to as patterns.

To do this, I go to one of the following four websites to generate something suitable:

There are certainly a hundred other great generators, but these are my 4 favs.

For our website, we can use SVG, but the SVG code must be packaged in the correct CSS code so that the browser can handle it.

You can use my own SVG to CSS background converter.

Instructions: Use SVG as block background

For this how-to I mainly access the new Custom CSS function of the Kadence Blocks. Here you can adjust the row layout and all blocks contained in it using CSS. Or just put a background from CSS and SVG.

I’m assuming you have a working WordPress blog with the Kadence Blocks installed.

1. Create Row Layout Block

Row Layout Insert Block
Row Layout Insert Block

First you create a new row layout block.

The fastest way to do this is with the shortcut “/ro“, which you enter in a new line in the Gutenberg editor. See the screenshot on the right.

Which layout you choose is entirely up to you – depending on what you want to design.

For the example here, I choose two columns with 66/33 split.

Currently it looks like this in my editor:

Screenshot: Row Layout Block with two columns
Screenshot: Row Layout Block with two columns

Now I fill the left column with some text and in the right column I place an icon.

I have the background with a purple gradient. You can do this with the “Background Overlay Settings” of the Row Layout Block. The text and icon are then “colored” white.

The 2 Steps:

I have provided the row layout with content.
I have provided the row layout with content.

This completes the element. All that’s missing is the background with the SVG graphic.

2. Create SVG graphic

Save your background as an SVG graphic.
Save your background as an SVG graphic.

Now you go to one of the above SVG generators. In the example I used “Circle Scatter” from https://app.haikei.app/.

Open the SVG file in the editor.
Open the SVG file in the editor.

If you have found a suitable background, save it as an SVG graphic.

Now open the graphic with any text editor and copy the entire content into your clipboard. See the screenshot on the right.

Open the SVG to CSS Converter and paste the previously copied SVG code at the top left.

In the same second, you will see in the field below the finished CSS code for your website. Copy it into your clipboard.

The SVG to CSS Tool in action

3. Insert CSS background into WordPress

In the third and final step, you need to insert the CSS background in the WordPress editor.

Now mark the previously created row layout, navigate down in the right menu and expand the item “Custom CSS”.

Within “selector {” and the curved brackets, you now insert your CSS background. Immediately the new background appears!

Here’s my example in live. I just added the button:

Speed up your website with WP Rocket

Turn your website into a rocket with the most powerful caching plugin recognized by WordPress experts.

Finished is my Gutenberg block with CSS background!

Conclusion CSS Background

The Gutenberg editor has grown extremely in recent years. Also grown are extensions such as the Kadence Blocks.

Finally, it is possible to store CSS code directly in the editor and for a very specific block.

Thanks custom CSS.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *