Web Tutorial: Nike Meme Generator Redux

Dear readers!

Remember that awesome little Nike Meme Generator I made late last year? Well, it's come to my attention that there's a teeny little flaw in its execution. This little sucker works fine with some pics... but when you use a picture that has a great deal of white in it, the contrast totally blows!

Take this lovely picture for example. I downloaded it off the net somewhere. It's just meant as an example, so please don't sue me.

Serena Williams in all
her athletic glory.

See what I mean? Some of the white text just doesn't show up well.

Today, we're going to rectify this issue. Because while I'm not a perfectionist, this strikes me as sloppy. The fix is pretty simple, actually. So here goes...

We start by adding a div tag around the paragraph tags, like so. This is meant to be an overlay of sorts.

<div id="memeContainer">
            <div>
                <p style="margin-top:50%"><?php echo $line1;?><br /><?php echo $line2;?></p>
                <p style="margin-top:30%"><img src="nikelogo.png"> <?php echo $slogan;?></p>
            </div>
</div>

Then we style this thing. It will fill the full width and height of the memecontainer class, with the position property set to absolute. Then we give it a translucent black background.

            #memeContainer
            {
                width: 500px;
                height: 500px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 1px solid #DDDDDD;
                background: url(<?php echo "uploads/" . $filecode . "." . $filetype; ?>) center center no-repeat;
                background-size: cover;
                font-family: georgia;
                color: #FFFFFF;
                font-size: 25px;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
                text-align: center;
            }

            #memeContainer div
            {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
            }

Refresh. This is how it should look like.

And now, with the same pic... wunderbar!

Print version!

Remember kids... life is not all black and white!
T___T