Change the Banner Background in Tesla / Split theme

Had a very quick look. I want to replace the Banner Background in the Tesla theme. Cheers

@rnr

You want to use your own image?

Hi Oscar,

Yes. An image I have relating to the subject

@rnr
Put your picture in the resources and this code in the site inspector CSS or global for every page, for the whole site.

header { background-image: url(%resource(name-of-your-image.jpg)%); }



I tried that code on Split Theme, but didn’t work, do you how I could do it for this particular theme?

@marcoalmeida

Yes, for Split you need another code.
Put this code in inspector CSS

#intro #intro-background { background: url(%resource(name-of-your-image.jpg)%) no-repeat center center; background-size: cover; }

1 Like

Thank you Oscar. I wonder how do you know that!!

@marcoalmeida
I am working already 10 years with RapidWeaver and this brings some experience :wink:
…and you can inspect elements in RapidWeaver (mouse right click on the element)

2 Likes

Which version are you using? I am with the 6.3.5 beta and when I right click on the preview page it only shows me the ‘Back’ option.

And when you set this option in the preferences? (restart RapidWeaver)

1 Like

Then I get the Inspect Element option. Thanks, but still I don’t know how to proceed from there, because now I get this element.

@marcoalmeida
Then, you can inspect the whole website :wink:
But it’s a long story !

For CSS choose this.

1 Like

…and so, you can get the CSS code.
Click on the CSS file.


@Oscar This is music to my ears!!! Thank you so much Oscar!!!

… my pleasure :wink:

Hi Oscar, I’ve tried this and nothing happens.
Where it says url am i supposed to put ‘my’ url ? e.g www.joeblogs.com etc etc

Im a bit out of my depth here but i really want to use this theme, it suits my business. This is the last thing i need to do.
If you or anyone else can help me with this id be so very grateful.
Ive looked at the images with arrows after your post and really have no clue.

Many Thanks
Lee

@CountryGent

Attention. In this thread, we talk about two themes, Tesla and Split.

This is the code for Tesla.

header { background-image: url(%resource(name-of-your-image.jpg)%); }

For Split you need this code.

#intro #intro-background { background: url(%resource(name-of-your-image.jpg)%) no-repeat center center; background-size: cover; }

Put the code in inspector CSS, the image in resources in RW.
No url of your site, only the exact name of the image in the resources.

That must work :wink:

The pictures in my last posts is a description for the function of the web developer tools.

Thanks Oscar,
i will give it a go tonight…
Let you know
Lee

Oscar, many many thanks it worked.
One last question, what size would i make the image for optimum results on desktop and mobile ?
If i knew where the original images were i could copy their size…

Really grateful
Lee

It must work :wink:

You speak of Tesla or Split?