One of the important task for a blogger, customizing the blog design to meet requirements. If you are a non-technical blogger then you will be facing this problem most of the time.

Especially, when you want to make a design change or add a new element in your blog – you will be in trouble.

Most of the time, instead of touching the code, you will be ignoring to do that design change.

This happens with most of the non-technical bloggers.

Recently, I discussed the list of programming languages for bloggers, if you are really interested, you can go ahead and learn some technical stuff’s related to blogging.

For a recent requirement, I wanted to remove the fusion slider from my home page. My Avada theme comes with tonnes of rich features and fusion slider is one of it. You can make great sliders with even parallax effect without touching any code.

The payback is the loading time.code to show text with background image

Currently, I am hosted with a shared hosting only and also, I disabled CloudFlare integration recently. I will be moving to VPS/Dedicated hosting only after I rebuild my blog’s traffic.

Hence, I am constantly working to reduce the blog’s loading time.

As part of this activity, I wanted to remove the fusion slider and replace it with plain HTML code which can simply load faster.

The requirement was to add a background image and write a text over it. I wanted to add text and also, buttons over an image.

If you are looking for a similar change to be done for your blog then this article will definitely be helpful to you.

The following piece of HTML+CSS code helps you to setup a background image (note: the background-position is set as left top).

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: left top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>

The background-image is the CSS property that you have to add and it takes URL (to your image) as a value. You can try to change this example as you like, in order to add your own text over a background image.

View demo on W3School

I did this similar change myself and now, my home page doesn’t have a fusion slider instead a plain HTML with text + button placed over a background image.

The result: blog’s home page, loading faster than before and you can see the home page coming up like a flashlight.

If you see my home page, I have added lot of information to it and I don’t want to compromise it considering the blog’s load time. Hence, I am constantly working to reduce the loading time without reducing the amount of information from the home page.

In your blog, if you are using a complex slider where you are displaying a text or any other element over an image – you can use this plain HTML+CSS approach. It loads faster and also, it solves your purpose.

Let me know, if you have any doubts in this part of source code.

2017-10-09T20:56:07+00:00

About the Author:

I love-to-code, passionate-to-write, an upcoming author, and WordPress enthusiast. Here at BlashO, I mostly share WordPress tips. Connect with me @Twitter.

Leave A Comment