You are here: Blog » Tutorials » How to assign a random background image to your Hide My Site login page

How to assign a random background image to your Hide My Site login page

Did you know that it is possible, and extremely easy, to assign a random background image to your Hide My Site login page? By this I mean that you can set the background image to be different every time the login page is viewed? This short post will show you how to do this. Note that you have to be using Hide My Site premium in order to set custom background images for your login pages.

How it’s done

Unsplash.it provides access to over a thousand placeholder images that can be loaded randomly. The images are all from Unsplash.com, which as I have mentioned in previous posts, is an excellent source of quality, high-end photos. All you have to do is set the Custom Background Image field in your WP admin > Settings > Hide My Site > to https://unsplash.it/800/600/?random. I also set the “Background Image Position” field to “Crop to Fit”. The reason is that this will set the image to use the full width and height of your login page, and also crop the image according to the login page dimensions.

That’s all there is to. Now every time your login page loads, a different and beautiful background image will be shown each time. Note that in my example I set the background image dimensions to 800 x 600, but you are free to do whatever you want for the width and height.

Thanks for taking the time to follow along with this quick post. I hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.

This entry was posted in Tutorials and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over fifteen years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">