Change the Banner Background in Tesla / Split theme

Tesla use 3 different sizes (small, medium and (big 2000 x 1500 px)), but with one size it works fine too !
I use only a 2000 x 1500 px image in the resources.


Split use different sizes.


ok I’m using Tesla.
How do i find the theme and get package contents? I can’t find it??

You must not change the pictures in the theme tesla.
(Tesla is in the content of the RapidWeaver.app)
Otherwise you have to put back the images with every RW update.
(For that, I make a copy of the theme in RapidWeaver, so I can keep the changes in the theme.)

You only must paste your image in the resources of RapidWeaver and all is ok with my CSS code.
It’s the best way to change the banner image.

This does not work for me. I’ve tried everything I can think of with file names, graphic sizes and variations of the CSS code for both Split and Tesla in both the page CSS and project wide.

In Split the best I can get is a black bar in place of the graphic with the text “MY WEBSITE” in white at the centre. In Tesla I just get a blank white box.

I’m using RW 6.3.7

@JWilbur

When you use Tesla Pro, you have also another way to use your own picture in the page headers/banners.
You can use the Custom Banner 1 to 10 (banner1.jpg) in the resources.
Look this video of the developer.
https://elixirgraphics.com/previews/tesla-pro/tutorials/

This must work! Yesterday, I have worked with this codes.

Can we have a new forum category titled: “Changing Tesla and Split theme banners”, please. :wink:

4 Likes

Oscar, your code works for me, and thanks a lot for posting…

Similar question: In Tesla, is there a way to left align the header image? Thanks again

@daviddelmonte

Put this additional code to CSS.

background-position: left;

now

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

Must work! But now, the picture isn’t no longer “really” responsive.

Understood. Please forgive me as I’m quite rusty.

@Oscar Your tutorial was perfect. I’m a first time RapidWeaver user, and I couldn’t understand why it would be so easy everywhere else to change the settings, but completely nonintuitive to change the theme image. Your suggestions and directions did the trick!

Tesla banners are not fully responsive anyway. They do adjust to some degree but I wouldn’t advise using banners where you need to see all or most of the image on all devices because that won’t happen. Abstracts work well. If you know any code to make them more responsive that would be great :slight_smile:

No, I know, unfortunately, no code for this.
But, I am of the opinion, that the banner images is quite well responsive.

Only when the “background-position” stands to left or right, is responsive away.

I tried with “width” and “height” 100%, but no effect.

As for Tesla – Tesla’s banner is responsive, it is just that it is responsive with its height, width and crop. The banner covers the entire browser window, so the image has to cover the whole thing. This means in addition to sizing up and down and keeping the image’s proportions correct it also must crop the image to ensure that the whole of the window is covered.

As for custom banners in Tesla – there is a super simple way that doesn’t involve all of this custom code. Tesla Pro offers a custom banner feature built-in to the theme. :slight_smile:

…and with this code all is perfect, in Tesla too :wink: Super theme!

header { background-image: url(%resource(DSCN0820.jpg)%); }

Yes I appreciate the difficulty with this type of full screen image and no criticism intended - I love Tesla Pro. Just so long as people realise that limitation with this type of image

While I’m on - why do the standard images come in 3 sizes?

The multiple image sizes allowed me to provide lower resolution images for smaller devices. This wasn’t something I could do with the custom images though, unfortunately. At least not without a good deal of confusion on the end user’s part.

2 Likes

I have tried that code in Split and it shows in preview but doesn’t publish.

When it shows in preview, that must work when you publish.
Try “Re-Publish All Files”

Thanks Oscar, but I am still having the same issue. Only my home page displays the header when published. Using Re-publish all files each time. This is the code Rapid Weaver Support suggested.

Tried this code first:

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

Rapid Weaver support suggested this one:

#intro-background {
background: url(%resource(Hornupblackcoat.jpg)%) no-repeat center center !important;
}

neither works when published.