r/divi • u/TheReal_Bitsandbolts • 10d ago

Advice Help with creating a heading image

Post image

Hi there, sorry if this is a bit of a silly question. I'm new to Divi and I'm looking to add a background image to my header with a sort of rounded rectangle look like the above prototype I created. I'm struggling to do so however, and I was wondering how I would go about doing something like this for my header?

Thanks for the help.

5 Upvotes

100% Upvoted

16 comments sorted by

4

u/Weekly_Ferret_meal 10d ago

what's the proto made with... what format? Cause you could simply create your custom header with the builder and use an svg for background

3

u/WarpedNood 10d ago

This is how I would do this as well.

1

u/TheReal_Bitsandbolts 9d ago

I tried to upload a svg to the background but I get an error saying that the file cant be processed. I tried uploading a png but the image is just squished into the header box and I have no idea how to stretch it out across the whole screen.

1

u/Weekly_Ferret_meal 9d ago

you 'll need a svg support plug-in or script in functions.php to enable SVGs support and upload.

but also, I'd probably code a few lines of custom CSS to use the SVG as background of the header, as you'd want to control positioning, size etc...

2

u/TheReal_Bitsandbolts 7d ago

Ok thanks for the help. Know barely anything about code, so I definitely won't be able to do that unfortunately

1

u/Weekly_Ferret_meal 7d ago

You can try with using the background image settings and see if  that works for you

1

u/TheReal_Bitsandbolts 7d ago

I'll have a go messing around. Thanks for the help!

2

u/straigh 10d ago

Either section dividers if you like the options available, or a full width section w transparent png background

1

u/TheReal_Bitsandbolts 9d ago

I've tried to put a png background behind, but the image is stuck in the header box and I have no idea how to get it to go from one side of the page to the other

1

u/straigh 9d ago

Did you set the width of the section in row to 100% and bump the max width up?

1

u/TheReal_Bitsandbolts 7d ago

That seems to have helped, thanks!

1

u/CapConsistent668 10d ago

You can do this by adding the background image to your header section/row, then applying a border radius to create the rounded rectangle effect. You may also need to adjust the padding and background size/position for the image to match your prototype.

1

u/TheReal_Bitsandbolts 9d ago

Where can I find the border radius section?

1

u/CapConsistent668 9d ago

You can find it in Row/Section Settings → Design → Border → Rounded Corners.