FINALLY! How to add a single image in slider with real text overlay.

Ive tried so many times to make this happen and have had no luck, but today, I have something I hope will be of use to others.

Whether or not you choose to have a single illustrative image within your slider widget for loading performance purposes you can still benefit from an image or slide show with real keyword rich text that both customers AND search engines can see.

However with most themes strangely this doesn’t come as standard so theres some thinking to do. If you are like me and ‘dabble’ because you run a business and its not your core skill you may end up pleading on forums or pleading for paid help to get this done but its quite simple once you know what to do where.

Firstly, your image needs to sit contained within a given widget you know that will be used within the pages you want the image to appear. For me, I wanted the image to sit high up on the top page as part of an introduction so the Epik SLider Wide widget was the right place for me to land this image. Whilst you can attempt to add an image as the background and make it not repeat, it appears on all of your pages and so is inappropriate.

The widget code for slider wide appears in the style.css file.

Find:

/* Slider Wide
——————————————— */

and add below it:

/*Hey! Ive ADDED BACKGROUND TO SLIDER WIDE WIDGET*/
.slider-wide {
background:transparent url(‘http://www.YOURDOMAIN.com/images/YOURIMAGE.png’)no-repeat bottom center;
height:380px;
border:0;
background-color:#293F5E;

Heigh requires a bit of adjusting, and the background color is optional of course.

THEN!

Go into your widget of choice in Appearance/Widgets in your wordpress admin and add a text widget to your theme widget (in my case I chose Slider wide as mentioned earlier).

Save and then check for alignment, font color etc. You may need to adjust the boarder for where the text starts, where it sits on the page and the colour since it is overlaying an image. For me I added a table with some cells defining left and top boarders along with a white font so the text stood out.

Then check against tablet and smartphone as well as stretching and squashing the browser window in your big screen view.

I hope this helps someone as it has taken me literally months to find this out 🙂