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

Classic Themes
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.

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; }

Bildschirmfoto 2016-04-09 um 10.08.54.png1524×610 680 KB

Bildschirmfoto 2016-04-09 um 10.09.04.png1462×558 272 KB

Bildschirmfoto 2016-04-09 um 10.09.42.png1568×620 277 KB

3 Likes
3

That’s awesome. Thank you!

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!!

5

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

1 Like