Help Split Background Image

[Idea]

Hello there!

So for a new CS I thought it'd be interesting to have a background split in half- one half of the border would have one image as a background, the other half would have a different image as a background. I have tried to use row/column, however that method leaves a gap between the main border and the background, plus also a gap between the two backgrounds, whereas I was looking for something more continuous.

If anyone knows of a method by which one could do what I'm looking for, I'd be grateful if you could teach me!

Thank you for reading and for your time.

 

[pomme]

so, this really differs depending on code, but the simplest way to do it is with border tags. for example, if you just have a simple border and want a split background, the code might look like this:

[border=1px black solid;
 width: 300px;
height: 200px; 
margin: auto;
overflow: hidden;
padding: 0px;]  [border=0px; background: blue; width: 150px; position: relative; height: 300px;][/border][border=0px; background: red; width: 150px; position: relative; height: 300px; top: -340px; left: 150px;][/border]

[/border]

and it would look like this:

Spoiler: code

the important things to look at in that example are the relative positioning and nesting of the borders, as well as the padding 0px for the parent element. i'm sure there are easier ways to do this, but this one really just varies based on what sizes of elements you have so there isn't exactly a fit-all option. i hope this helped, and if you need any tweaks for your individual code please don't be afraid to shoot me a message!

 

[Idea]

so, this really differs depending on code, but the simplest way to do it is with border tags. for example, if you just have a simple border and want a split background, the code might look like this:

[border=1px black solid;
 width: 300px;
height: 200px; 
margin: auto;
overflow: hidden;
padding: 0px;]  [border=0px; background: blue; width: 150px; position: relative; height: 300px;][/border][border=0px; background: red; width: 150px; position: relative; height: 300px; top: -340px; left: 150px;][/border]

[/border]

and it would look like this:

Spoiler: code

the important things to look at in that example are the relative positioning and nesting of the borders, as well as the padding 0px for the parent element. i'm sure there are easier ways to do this, but this one really just varies based on what sizes of elements you have so there isn't exactly a fit-all option. i hope this helped, and if you need any tweaks for your individual code please don't be afraid to shoot me a message!

Would this work for border images? Since I was specifically looking for using two border images as a background.

 

[Alteras]

This should do:

[border=unset; padding: 0; position: relative; margin: 0 auto; max-width: 100%; width: max-content][border=unset; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; border: 20px solid crimson;][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px;][IMG]https://www.rpnation.com/gallery/deisecretagent-jpg.38535/full[/IMG][/border][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px;][IMG]https://www.rpnation.com/gallery/roguescreed_waifu2x_art_noise3_scale_tta_1-png.38741/full[/IMG][/border][/border][/border]

 

[Alteras]

ahhh, gotta love it when your browser doesn't load everyone else's posts XD

 

[Idea]

This should do:

[border=unset; padding: 0; position: relative; margin: 0 auto; max-width: 100%; width: max-content][border=unset; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; border: 20px solid crimson;][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px;][IMG]https://www.rpnation.com/gallery/deisecretagent-jpg.38535/full[/IMG][/border][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px;][IMG]https://www.rpnation.com/gallery/roguescreed_waifu2x_art_noise3_scale_tta_1-png.38741/full[/IMG][/border][/border][/border]

Hmmmm.... this one doesn't really seem to be making a background? Forgive me if I'm being dumb, but it seems to just be making a container for two side by side images.

 

[Alteras]

Hmmmm.... this one doesn't really seem to be making a background? Forgive me if I'm being dumb, but it seems to just be making a container for two side by side images.

Pretty much. This code lends more to using the image itself as a way to size the border, since I was pretty lazy about having to deal with mobile compatibility. The way to treat it as a background:

Hello!!

Inside text

Hello!!

Inside text

[border=unset; padding: 0; position: relative; margin: 0 auto; max-width: 100%; width: max-content][border=unset; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; border: 20px solid crimson;][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px; position: relative;][IMG]https://www.rpnation.com/gallery/deisecretagent-jpg.38535/full[/IMG][border=unset; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: initial; color: white;]Hello!!

Inside text[/border][/border][border=unset; padding: 0; width: auto; height: auto; flex: 1 1 0; max-width: 500px; font-size: 0; min-width: 200px; position: relative;][IMG]https://www.rpnation.com/gallery/roguescreed_waifu2x_art_noise3_scale_tta_1-png.38741/full[/IMG][border=unset; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: initial; color: white;]Hello!!

Inside text[/border][/border][/border][/border]

 

[Alteras]

if you want just a pure, single block that has two backgrounds:

[border=unset; padding: 0; width: 1200px; height: 500px; background-image: url('https://www.rpnation.com/gallery/deisecretagent-jpg.38535/full'), url('https://www.rpnation.com/gallery/roguescreed_waifu2x_art_noise3_scale_tta_1-png.38741/full'); background-size: 50%; background-repeat: no-repeat; background-position: left, right;][/border]

 

[Idea]

Thank you very much!