Change the Banner Background in Tesla / Split theme

[Oscar (Oscar Schmid)]

@msteinel

You should use that code. With additional #intro
!important is not necessary.

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

[manofdogz (LJ)]

One complication here is adding banner images to sub pages in Split theme (any page not on root). You need to ad …/ just before resources

So top level (root) should be: url(resources/

1 folder down should be: url(…/resources/

2 folders down should be: url(…/…/resources/

And when you do this, the banners wont show in preview - they will however when published!

[Oscar (Oscar Schmid)]

It’s not necessary to do this.
I see all banners in RW preview without this code.

… and RapidWeaver does this itself, automatically.

Here in a sub page

… and here in a main page

[manofdogz (LJ)]

@Oscar

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

Sorry I should have looked in more detail… your code is better than Yuzools on the ‘how to’ page. ! Wish I’d seen this before - would have saved me some head-scratching and time! Thanks

[kryten (Stuart)]

@Oscar @manofdogz

There really does seem to be a lot of confusion about how to manage custom banner images in the Split theme doesn’t there? I wonder how much of it stems from the use of a hard-coded path in the early snippets (rather than using the resource macro?) Not sure.

Thank you for pointing out that the Yuzool page isn’t as helpful as it might be. Thats something I’m going to fix right now, as in tonight.

[kryten (Stuart)]

@Oscar @manofdogz

https://www.yuzoolthemes.com/support/article/view/themes/split-theme-banner-images-101

Any better?

Full credit to @Oscar for the snippet and @manofdogz for pointing out the gap in the knowledge base.

[Oscar (Oscar Schmid)]

Thank you for the honor @manofdogz @kryten

Here another post on this subject.

Split Theme - Getting images to scale to the width of the site

Hello - I’m having a few issues with the Split Theme! I’m new to this so bear with me. I am adding custom pictures to the banners on the site and can’t get the theme to just scale to the width of the page. I essentially want to be able to input a high res photo into the banner area, and for it to scale up and scale down, in full width / Ipad and Iphone mode. At the moment the image crops or leads huge borders down the sides, which obviously looks terrible. It would also be useful to know the …

[kryten (Stuart)]

@Oscar
Awesome… Now I’m considering whether I should make a stack for Split just to simplify the myriad of possibilities. We’ll see.

[CountryGent (Lee Jones)]

Hi Oscar
Thanks for your help in January.
Ive just put a new drive in my mac and cannot work out what files to copy over to get my ‘Tesla Copy’ theme to work.
Can you remind me please
Thanks
Lee

[instacks (Jannis from inStacks Software)]

@CountryGent
Hi Lee,
do you have still access to your old hard drive? Do you have RW6 or RW7?
Cheers, Jannis

[CountryGent (Lee Jones)]

Thanks for getting back to me.
Ive RW 6 now and will likely upgrade in the near future…
Cheers
Lee

[instacks (Jannis from inStacks Software)]

Again, do you have access to your old data on your old hard drive to copy the theme from?

[CountryGent (Lee Jones)]

Sorry dude yes i do, its plugged in on a cable right now

[instacks (Jannis from inStacks Software)]

Well, the you have to navigate to the same folder on that hard drive, where the themes are placed.

http://cafe.yourhead.com/?qa=50/how-can-i-find-the-addons-folder-in-rapidweaver-6

[CountryGent (Lee Jones)]

Thanks, sorted and I’m up and running.

Much appreciated Jannis

[allankellynet (allan kelly)]

Thanks for the advice here, allowed me to change the banner image!

One question…

I’d like to banner to be smaller, really I mean thinner, as it is now someone visiting the site gets 60% of the picture and needs to start scrolling ASAP.

Is it possible to resize it?

Thanks

[Steven (Steven Humes)]

Hi there,
Using RapidWeaver 7 on a Macbook Pro with OSX El Capitan:

I copied the CSS code

#intro-background {
background: url(resources/newheader.jpg)
no-repeat center center!important;
}

and put it where it goes. The new header shows up in RapidWeaver but NOT online after I publish. It just shows grey.

When I upload the “newheader” I can see the file called “newheader” actually uploading. Yet, the finished product shows only a grey background.
See screen grabs.

Any advice?
Thanks.

[Steven (Steven Humes)]

So I tried adding the “…/” just before the word “resources” to no avail. What worked is the following, which is listed above by manofdogz.

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

Works like a charm. Thanks!

[johnmcboston (John McLachlan)]

Thanks for the info guys. I changed my banner image. had to make it a bit darker to work out, but it’s there.

I know this isn’t official RW support - but for a drag-and-drop editor, having to insert CSS on every page just to change an image seems like such a kludge? or is this just a way to get you to purchase other themes, which might be more editable…

I’d love to find a way to make the overall banner a bit smaller as well…

[yuzool (Michael Frankland)]

Thanks @johnmcboston - in RapidWeaver 7 that’s now possible with a new feature - banner replacement - which is added in any RapidWeaver 7 optimised themes, like Kiki or Voyager - which ship in RW7