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
4. Add new post using Dashboard > Posts > Add New
<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’);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 ^^