Banner Images

[tomn]

Currently I have a Banner image and it's set to repeat. Basically the same picture side by side.

I was wondering if there is a way to put two completely different pictures in the banner. In my case two bears fighting with another picture next to it side by side or horizontally? if there's a way to do it I can't figure it out.

Here is what it currently looks like.

[Retread]

Mar 15, 2020 4:36:41 GMT -8 tomn said:

Currently I have a Banner image and it's set to repeat. Basically the same picture side by side.

I was wondering if there is a way to put two completely different pictures in the banner. In my case two bears fighting with another picture next to it side by side or horizontally? if there's a way to do it I can't figure it out.

Here is what it currently looks like.

Completely different could be tricky. But if both images have the same width and height, it shouldn't be too hard to manage.

I made a copy of the same image but the one on the left has been altered and the color inverted. That was a convenient way for me to display this. But the content could be completely different. Just so both images have the same size.

Add this to the bottom of the Style Sheet of the desired theme:

#banner {
    background-image:
        url('https://storage.proboards.com/6994517/images/vSCryLLVIGjBxXGlvjWo.jpg'),
        url('https://storage.proboards.com/6716665/images/mkffhKOjJVZlqKtbq0ot.jpg');
    background-position: left, right;
    background-repeat: no-repeat, no-repeat;
    background-size: 50%, 50%;
    height:15vw;
}
/* end of section */

The change the urls of the images as desired.

You might need to adjust the height specification at the end. But if you use vw rather than px, it will automatically change the banner height when viewing in a different viewport width.

[tomn]

Thanks

[tomn]

Hi, I asked you a while ago how to put to separate banner images side by side on another forum I help administer. I have another one but can't seem to figure out how to get the picture to the right to show the whole picture instead of chopping off the top. The pictures are not the same size horizontally or vertically so I'm not even sure it can be done using your formula above. american-bull-boxer.proboards.com/

Any thoughts?

Here is the picture. 

[Retread]

Hi tomn

We can finesse the CSS just a bit for the dissimilar images. We can change the background-size so as to have the left side image covering more of the background and the right image covering less. Increasing the height slightly will look better, imo.

So change what you have at the bottom of your style sheet to this:

#banner {
    background-image:
        url('//storage.proboards.com/7251424/images/oDdisnMlHmSPSmdWRzyS.jpg'),
        url('//storage.proboards.com/7251424/images/pgHScGLWayFirTKXz0UG.jpg');
    background-position: left, right;
    background-repeat: no-repeat, no-repeat;
    background-size: 67%, 33%;
    height:25vw;
	}
/* end of section */

If it's important to have a shorter banner and you are willing to sacrifice some of the top of the left side image, we can do that and have the left image cover even more (horizontally) of the banner. I'm less keen on this but whichever one you like best is the one you should use.

#banner {
    background-image:
        url('//storage.proboards.com/7251424/images/oDdisnMlHmSPSmdWRzyS.jpg'),
        url('//storage.proboards.com/7251424/images/pgHScGLWayFirTKXz0UG.jpg');
    background-position: left, right;
    background-repeat: no-repeat, no-repeat;
    background-size: 74%, 26%;
    height:20vw;
	}
/* end of section */

[tomn]

Hey thanks man for helping me with this. Much appreciated.