32

Sometimes we have to post images with lots of whitespace, which really does not stand out in the white background of Stack Overflow:

enter image description here

This can be extremely confusing when we post the images of the site itself, for example in Meta.

Is there a simple way to make images with whitespace stand out against the white background of the site?

8
  • 3
    I'd use Paint and the Rectangle tool with no fill ;)
    – user2140173
    Commented Aug 29, 2014 at 9:16
  • 9
    @mehow: Ain't nobody got time for that Commented Aug 29, 2014 at 9:23
  • 1
    hhah yeah I agree BUT I was just saying cause I actually put effort into asking and try to make sure my questions are spot on before I hit POST YOUR QUESTION ;) btw. ++ to your Q&A
    – user2140173
    Commented Aug 29, 2014 at 9:25
  • 2
    meta.stackexchange.com/questions/138594/…
    – gnat
    Commented Aug 29, 2014 at 10:18
  • 9
    You can use freehand circles :)
    – Keale
    Commented Aug 29, 2014 at 12:51
  • 2
    @mehow - GIMP with a Drop Shadow. Its takes three clicks: Filters -> Light and Shadow -> Drop Shadow... Four clicks if your count the right click for "Open with GIMP".
    – jww
    Commented Aug 30, 2014 at 9:21
  • @jww: You will also need to scale the image or expand the canvas. Otherwise the drop shadow will be outside the drawing area/canvas. Commented Aug 30, 2014 at 12:29
  • @Krumia - GIMP does it automatically if you leave "Allow Resizing" checked. See Drop Shadows in the GIMP docs.
    – jww
    Commented Aug 30, 2014 at 12:33

5 Answers 5

44

I was inspired to write this question because of a neat trick gnat used on one of my answers to solve this problem.

You can just put the image inside a blockquote. This will add a nice shaded background to the image.

Markup:

> ![image description][1]

   [1]: https://i.sstatic.net/tbEOF.png

Result:

enter image description here

Note: The blockquote element in mobile site is handled in a different way. So you don't get the shaded background in the mobile site. So mobiles site shows pictures pretty much same with or without this trick. So you can use this trick to make your picture to stand out at least in non-mobile versions of the site.

9
  • Just a note: That doesn't really work on the mobile site.
    – Mike M.
    Commented Aug 29, 2014 at 9:32
  • 1
    @MikeM.: Then that should be reported as a bug, I think. (If not there's a design decision that blockquotes should only contain text). Commented Aug 29, 2014 at 9:39
  • 4
    It's not a bug. Block quotes are handled differently on the mobile site. Instead of the grey background, they have a blue vertical line on the left.
    – Mike M.
    Commented Aug 29, 2014 at 9:41
  • Well I have never used the mobile site. If that's so it definitely reduces the usability of this trick. Commented Aug 29, 2014 at 9:42
  • You can check it out. There's a "mobile" link in the page footer, near "contact us".
    – Mike M.
    Commented Aug 29, 2014 at 9:48
  • 1
    Yup, that is aweful. But it makes not much difference than the picture without the blockquote. So that's not a reason not to use the trick. But I will add this finding to the answer. Commented Aug 29, 2014 at 10:12
  • Yeah, like I said, it was just a note. Your answer does explain why I've seen people quoting images, however, so thanks for that.
    – Mike M.
    Commented Aug 29, 2014 at 10:19
  • Yeah, but it doesn't make me nervous :-(
    – TaW
    Commented Aug 30, 2014 at 21:06
  • 3
    I think this might be most semantically correct approach for screenshots. After all, a screenshot is a way of "quoting" the screen. Commented Sep 1, 2014 at 16:31
38

Here's a different way. Works on mobile, too.

image description

<kbd>![image description](https://i.sstatic.net/tbEOF.png)</kbd>

Bonus: you piss off the semantic web dweebs. Oh, and OCPD folks once they realize that the margins aren't even. Look at the margins. Does it make you feel nervous? Does it?

for the OCPD sensitive, you can use this helpfully provided update:

And like this to add a "padding-top":


image description

<kbd>  
![image description](https://i.sstatic.net/tbEOF.png)</kbd>
7
  • 42
    Best "misuse" of the kbd tag for ages :)
    – Kev
    Commented Aug 29, 2014 at 18:43
  • 8
    Makes me very nervous, and I'm not a semantic anything :) Commented Aug 29, 2014 at 22:35
  • 26
    I don't see that button on my keyboard. Where can I find it?
    – tckmn
    Commented Aug 30, 2014 at 12:25
  • 8
    @Kev: Only use of kbd tag for ages. I hear that there's a celebration at W3C. Commented Aug 30, 2014 at 12:47
  • I added a way to reduce the nervousness of the margins. Hope you don't mind :) . . . PS: not really sure why the OCD observation was stripped out. Voting to reinstate.
    – brasofilo
    Commented Aug 31, 2014 at 18:17
  • 1
    Ahhh! The padded top! I'm still nervous!!! :(
    – Jason C
    Commented Nov 13, 2014 at 19:55
  • FYI, if you try to use the <kbd> for this, be aware that it breaks the site on large images in certain web browsers, as mentioned here: meta.stackoverflow.com/q/363914 Commented Mar 1, 2018 at 8:57
5

Perhaps a css box-shadow for post-text images?

.post-text img { 
    box-shadow: 0 0 10px rgba(0,0,0,.75) 
}
<div class="post-text">
    <img src="https://i.sstatic.net/tbEOF.png">
</div>

2
  • 5
    Yay! Stack Snippets! Commented Sep 23, 2014 at 15:46
  • No way! This will kill pie charts and other non-rectangular data. Only acceptable as a comment triggered option <!-- image: shadow --> but in this case I would go with a simple 1px gray border. <!-- image: border-->
    – Largato
    Commented Nov 30, 2016 at 9:28
3

Here's an easy way with GIMP. Open the image, then Filters → Light and Shadow → Drop Shadow....

If you leave "Allow Resizing* checked, then GIMP will properly size the canvas for you based on the blur radius. See Drop Shadows in the GIMP docs.

The image below took about 10 seconds to open, add the effect and save. I think it totaled about 5 mouse clicks. Most of the time was spent while GIMP was starting up.

enter image description here

7
  • 5
    yeah, but neither do I use Gimp not would I want to change the original Image; it is sometimes used to test things and a changed version just won't do!
    – TaW
    Commented Aug 30, 2014 at 21:09
  • 1
    That’s really outside of the scope of the question, which is about how to post images and make them standout on Stack Exchange, not how to edit images to make them stand out anywhere. If someone asks how to frame an oil painting, the answer is expected to involve building wooden or metal frames for the paintings, not how to paint black borders around the edge of the canvas with oil paints, which is impractical. Commented Aug 31, 2014 at 16:45
  • 3
    @Simon - the poster asked: "Is there a simple way to make images with whitespace stand out against the white background of the site". This is a simple way. Not only is it simple, its attractive. I'm not sure where you are reading those additional requirements.
    – jww
    Commented Aug 31, 2014 at 17:11
  • @TaW - Do whatever works for you. If you don't know how to use GIMP, then use something else. I haven't come across a case where a drop shadow broke a question, and I've performed it for a number of folks. See, for example, How to make my drawing move inside HTML5 canvas?.
    – jww
    Commented Aug 31, 2014 at 17:18
  • 1
    Well, it needn't but it can. If an image is to be analyzed I'd rather not change it. And I love those <kdb> tags..
    – TaW
    Commented Aug 31, 2014 at 17:28
  • 1
    @TaW - sure, it can break a question. But I have not encountered such a question (yet). You're complaining about a problem that does not seem to exist. If you don't want to do it, then that's fine. Move on.
    – jww
    Commented Aug 31, 2014 at 17:43
  • @jww does it work for .gif image?
    – aircraft
    Commented Dec 20, 2016 at 14:28
1

I'm not crazy about them in general, and I prefer the quoting approach mentioned in another answer for screenshots since a screenshot is a sort of quotation of the screen, but how about some horizontal rules?

----

![some black shapes on a white background][2]

----

produces


some black shapes on a white background


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .