Maybe you really like that picture you took and you want to put a text on top of it, and post it without opening an image editor. A quick CSS tweak can make your blog post snazzy and unique.

20130701_171327_1    Plain Picture to Picture with Foreground Text

Parc Lafontaine in the summer ^_^

1. Upload a picture using your dashboard > media > add new. Select file, after upload has finished, click edit.

3. Get the file URL, copy it somewhere, you’re gonna need it later. Also get the dimensions, width x height

12

4. Add new post using Dashboard > Posts > Add New

5. At the Add New Post window, set the title, tags , etc then
go to TEXT tab, (yes, we’re coding, don’t worry, this is easy as cake)
Capture
6. Now, we can input custom HTML with some CSS styling right into our code (fun right), enter this code

<div style=”background-image:url(”);width:600px;height:338px;”>
<br />
<br />
<br />
<div style=”background-color:rgba(8,8,54,0.5);padding:20px;margin:20px;”>
<h2>Ur text, go crazy</h2>
</div>
</div>

7. The outer div is for the image. Place the file URL we copied earlier inside the background-image:url(‘     ‘)

8. Set the width and height of your image

,for our example, it is

width:600px;height:338px;

9. Now to make our foreground text visible, it is better to set our inner div a background color that will be transparent or semi-transparent to the image, this is accomplished by the background-color:rgba( )

parameters: (red value, green value, blue value, opacity)

You can use a color picker to determine the exact RGB values like this site: COLOR PICKER

Opacity: 1 is for full opacity, color is opaque, not transparent, 0.5 is semi, 0 is full transparency, you can tweak for your needs

<div style=”background-color:rgba(8,8,54,0.5);padding:20px;margin:20px;”>

10. This is the full code for my sample, I put 3 line breaks to place some space before the text div, you can other positioning types, and it also depends on the size of your picture, you can also adjust the margin (the space outside the div text) and padding (the space inside the div text),

<div style=”background-image:url(‘https://lenmorld.wordpress.com/wp-content/uploads/2013/08/20130701_171327_1.jpg&#8217;);width:600px;height:338px;”>
<br />
<br />
<br />
<div style=”background-color:rgba(8,8,54,0.5);padding:20px;margin:20px;”>
<h2>Ur text, go crazy</h2>
</div>
</div>

Please comment. Tell me what you think ^^