Under Construction Page is a free WordPress plugin that's rapidly gaining popularity. There are almost 70,000 active users at the moment, and it seems that the number will keep on growing. The plugin is completely free, and the developers are updating it twice per month. We're not going into details today, as we already wrote a detailed review of Under Construction Page.

Although we love all the themes that are available with the plugin, many users would still want to create a custom one. So far, you can't add your own background images with Under Construction Page. Well, that's only true if you are searching for the option in one of the settings tabs. Until the developers add the feature, we're about to show you how to hack Under Construction Page and use any background image that you want.

Don't worry; you won't really have to hack the Code. Actually, you won't even have to alter the source code nor tamper with the files. We will show you a quick way of changing the background image by simply adding a few lines of CSS. You will just have to copy the code and change the image.  Stay with us as we're about to guide through the process. If you're not interested in the process, you can scroll down and copy the entire code.

Prepare the plugin for custom code

Before we can start working on the custom image, we need to prepare the plugin. Obviously, you will have to install and active Under Construction Page. After that, open Settings -> UnderConstruction and go to the Design tab.

Although we're about to change the theme, we still have to select one so that we can start the work. For the purpose of this tutorial, we selected the Windmill theme, but you can choose any theme from the list. If you choose another one, take note that a few things might look different.

Let's change the image

Now we're ready to hack Under Construction Page. We have prepared the picture we will use as a custom background. But before we can use it, we'll need to remove the windmill.

1. Hide the original image

There are a few different ways of achieving this. The best way would be to open the source code and remove the image completely, but we already promised there wouldn't be too much coding involved. So let's just hide the original image with custom CSS.

#hero-image img {
opacity: 0;
}

That was easy. Technically, the original image is still there, but we just made it completely transparent. Obviously, this is not the best way of removing the original image since you're still loading it, but it will do for this example. If you want to do it the right way, go to the source code and remove the original image for good.

2. Add a custom picture

Now we're ready to set a new background image in Under Construction Page. We already prepared one and uploaded it to our Media Library. If you're about to stretch the image to the screen like we're about to do, we suggest that your new one is as big as possible. In this case, our image was 1920×1080.

#hero-image {
    background-image: url(/yourimage.png);
}

After you copy the code, don't forget to change the URL to your own one. If you have uploaded the image to the Media Library, use a relative path instead of the absolute one.

3. Fix the position

The chances are that your new background image won't be placed the way you want it to be. In our example, we had to move the image all the way up. So, here's a little update to the #hero-image.

#hero-image {
    background-position: 40% 70%;
}

You can see the result in the next screenshot. The image now looks much better! Depending on your choice, just play with it and change the numbers. If you are interested in more details about how this work, please see more about the background-position property.

4. Remove the top bar

As you can see from the previous screenshot, there's still a residue of the original background. Since we went with the Windmill theme, it is a green bar on top of the screen. While it looks perfect when you have the original design, it's something that we need to remove for the custom design we uploaded.

To do that, we will move the margin for the HTML element.

html {
margin: -20px;
}

Doesn't it look much better without the top bar?

5. Final touches to the custom theme

Although we're done with the custom image, we just can't leave the page like this. We still want to change a few colors which will make the under construction page much better. We just can't leave that green color on the bottom of the screen. Let's make a few more fixes and change the color of the body background (which will affect the lower bar) and the background color of the container which holds the main content.

body {
       background: #2c2442;
}
.container-wrap {
    background: #402a48;
}

This is now much more to our likings! What do you think?

The complete code

If you didn't want to go through the entire process step by step, here's the full code that you need to copy and paste:

1. Go to Settings -> UnderConstruction -> Design tab
2. Copy and paste this code:

#hero-image img {
opacity: 0;
}
#hero-image {
    background-image: url(/yourimage.png);
    background-position: 40% 70%;
}
html {
margin: -20px;
}
body {
       background: #2c2442;
}
.container-wrap {
    background: #402a48;
}

3. Modify the parameters if needed
4. Save changes

This is it. If you have followed us through these five quick steps, you have successfully hacked the plugin and changed the background image to a custom one.

Please take note that each image might behave a bit differently, so you will probably have to customize the dimensions and margins according to the picture you have chosen. If you have any questions, please feel free to leave the comment. Also, don't forget to show us your custom work. If you want a custom design like this one but you don't want to do it by yourself, you can always contact us, and we will be more than happy to help you.

The post How to hack Under Construction Page and use any background image you want appeared first on WP Loop.