Formatting. Images Side-by-Side

TappedOut forum

Posted on June 1, 2018, 4:01 p.m. by DrkNinja

Is there anyways to post images side by side in a description?

realBorborygmos says... #2

LIKE THIS (FYI THE 30% IS FOR 3-ACROSS ... USE 23% FOR 4 AND 19% FOR 5):

<img src="http://static.tappedout.net/mtg-cards-2/guildpact/borborygmos/borborygmos-cropped.jpg" style="float: left; width: 30%; margin-right: 1%;">
<img src="http://static.tappedout.net/mtg-cards/gatecrash/borborygmos-enraged.jpg" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
<p style="clear: both;">

June 1, 2018 4:56 p.m.

DrkNinja says... #3

@realBorborygmos you are the MAN! Or woman, whatever fits... lol.

June 1, 2018 5:01 p.m.

Femme_Fatale says... #4

That's a lot of code for something so ... basic x.x

June 2, 2018 12:56 a.m.

clayperce says... #5

Femme_Fatale,
Yeah, no kidding! :-D

June 2, 2018 1:14 a.m.

DrkNinja says... #6

I mean I'm open to other suggestions...

Also since you are all code monkeys, I have a CSS stylesheet applied to my The Planeswalker Society deck and for some reason the image won't scroll with the page even though I have background-attachment set to scroll. Help?

June 2, 2018 1:30 p.m.

Hellsing says... #7

Test text

<img src="http://static.tappedout.net/mtg-cards-2/guildpact/borborygmos/borborygmos-cropped.jpg" style="display:inline-block;width:27.5%;">
<img src="http://static.tappedout.net/mtg-cards/gatecrash/borborygmos-enraged.jpg" style="display:inline-block;width:27.5%;">

<p>Test text</p>

realBorborygmos This approach requires lesser code but aint that great. For like many pictures I could imagine setting up some sort of table to get a better view of them.

---

DrkNinja Hi! Typo on line 3, use ";" instead of ":"
Background attachment should also be set to "fixed". Try this and see if it works.

June 2, 2018 6:07 p.m. Edited.

DrkNinja says... #8

@Hellsing I tried it... but it didn't work.

Here's the code for the background.

#sitebody  /*Background Image*/
{
    background-color: black;
    background-image: url('https://i.imgur.com/7tWdJU5.jpg');
    background-attachment; fixed; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
       
}

I keep racking my brain over it and I can't figure out why it's doing it.

June 2, 2018 7:09 p.m. Edited.

DrkNinja says... #9

Found a workaround for now, but I'd really like to know why the CSS didn't work.

<img src="https://i.imgur.com/7tWdJU5.jpg" style="position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;"/>

June 2, 2018 7:13 p.m.

Hellsing says... #10

srry I'm tired. I was unclear. Correct typing would be
background-attachment: fixed;

June 2, 2018 8:05 p.m.