Background images tiling vs stretching

ketherian

Hey all.
On my site, I have the following CSS for the background of the campaign page:
{
box-shadow: 0em 0em 1em 0em black, 0em 0em 2em 0em black, 0em 0em 3em 0em black;
border: 24px solid transparent;
background-color: transparent;
border-image:url('//db4sgowjqfwig.cloudfront.net/campaigns/126647/assets/530634/bgbordersolid_V2.jpg?1448417401') 36 fill round;
border-image-repeat:stretch;
}

It looks great on short pages
"https://dwarves-1.obsidianportal.com/":https://dwarves-1.obsidianportal.com/

But on long pages it's awful:
"https://dwarves-1.obsidianportal.com/wiki_pages/trunau-gazetteer":https://dwarves-1.obsidianportal.com/wiki_pages/trunau-gazetteer

The width of the campaign is 1600px. The width of the image is 800px.
If I set border-image-repeat to repeat (as opposed to stretch); I get a line down the middle of my background (as two copies of the background image slam together to fill the space).
Is there a way to get the image to stretch in width but tile in height?

What I don't get is that I'm using the css from "Stonemason's Ledger by Basileus":https://theedgeofnight.obsidianportal.com/wikis/stonemasons-ledger
All I've done is changed the background. (original: "Cool paper background":http://db4sgowjqfwig.cloudfront.net/assets/315171/bgbordersolid.jpg?1396932078, new: "stone background"://db4sgowjqfwig.cloudfront.net/campaigns/126647/assets/530634/bgbordersolid_V2.jpg?1448417401).

Help.

-
Ketherian
"Signs & Portends":http://swtwc.obsidianportal.com

Basileus

Change the border-image-repeat property to "stretch round". I.e.:

border-image-repeat:stretch round;

For this property, if you have two values, the first governs horizontal and the second applies to vertical. It won't be perfect without a tiling texture, but it should look much better stretched across with minor seams as you scroll down.


Edit: That's probably the difference between yours and mine if all you changed was the image. If you look at the original image, you can see that it can be split into four identical (mirrored) corners, so its a tiling texture.

Very slick, I dig it!

ketherian

Thanks Basileus!
Have I told you just how big a fan I am of your templates? I am. I tend to fiddle with them (and override them) alot on my sites; but I rely on the template to get me started.

Your solution made the stretching on long pages a lot more palatable.
I'll see if I can get a tile-able image for a background in the long run.

-
Ketherian
"Signs & Portends":http://swtwc.obsidianportal.com

Basileus

That's awesome, ketherian! I've been away from OP for about a year, and its really gratifying to find that folks are still using those templates.

If you want to play with a tiling version of your texture, here's a link to a quick version I whipped up: https://db4sgowjqfwig.cloudfront.net/campaigns/64568/assets/533217/stone_background_tiling.png?1449264366

The "mirroring" effect may be too visible for your liking, but the seams are less noticeable.

Edit:

This version only tiles vertically (so no horizontal mirroring): https://db4sgowjqfwig.cloudfront.net/campaigns/64568/assets/533224/stone_background_tiling_vertical.png?1449265273

If you'd like to keep a copy of either, feel free to grab a copy and upload to your campaign.(never know what will happen to mine).

ketherian

Neat!
thanks.

I've downloaded the graphics and will play with them this weekend.
The gent who's actually the GM of the dwarves game thinks your initial fix suits his purposes.
I have to admit, the mirroring effect on the first graphic you listed above makes it look there's a face coming out of the stone. Kinda creepy actually.

As to your templates, I doubt I'm the only one using them.

-
Ketherian
"Signs & Portends":http://swtwc.obsidianportal.com

Basileus

Face? What face?

I'm almost certainly not trying to trick you into releasing a hungry, nameless, extra-dimensional entity into the mortal world through your screen...

I'm not even sure why you would bring up such a ridiculous theory...

- whistles innocently and quickly flees into a dark alley -

GamingMegaverse

@basileus- you have helped many of us.... which is why if you go somewhere else you need to let us all know...