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


(Jimmy Chainey) #1

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 exact resolution (hight and width) of the stock banner images, so that I can create banners to exactly that spec.


Change the Banner Background in Tesla / Split theme
(Oscar Schmid) #2

You can use many scales.
Split use different, 1280 x 853 and 2400 x 1598 px

I use a picture with 968 x 645 px, works too.

Try this code in CSS (image in Resources).

#intro #intro-background { height: 100%; width: 100%; background: url(%resource(your_image.jpg)%) no-repeat center center; background-size: cover; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

… or only this, works too.

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


(Jimmy Chainey) #3

That’s awesome. Thank you!


(Jimmy Chainey) #4

@Oscar - do you have any cool Footer code for making footers look good on Split Theme - perhaps with social media icons linking to various sites etc?

You seem like the ‘go to’ guy on all things code!!


(Oscar Schmid) #5

Look here.
There are some solutions on your thread :wink: