How to find, modify and add free images to your website background?

Images can be a tricky thing to add to your website when you want to maintain the aesthetic and not disrupt the flow. Furthermore, where can you go to find free pics and then alter them? There are many ways to use an image to enhance your work. For this tutorial, we will be using the image as the background for the whole website. I will show you exactly how to find, modify, save and insert your image as your background in four easy steps.

Find your image! First thing you’ll want to do is visit a site that offers free pictures. (I recommend pexels.com unsplash.com or pixabay.com) Browse around and find and image you like and think will work well in your design. Download and save it into a space you will remember.

Modify It The next step will be resizing and cropping the image to your liking. (I use picresize.com) Upload or ‘drop’ the file and click “Continue to edit picture”. At this point you will see a variety of options including rotate, flip, crop and resize. Once you have made all your changes, save the newly resized image. Go to your finder, find where you have the image saved, and then drag it over to your VS.

Add It In your HTML file, you will need to create a space for your image to sit and designate a class to reference in your CSS file. Start by going into your < body> tags and adding a < div> tag. Within the < div> tag, add the class bg-image. Your tag should now look like this < div class=“bg-image”> < /div>.

Style It Go into your CSS file and on a new line, refer to the class you have assigned in the previous step using a period and the name. (.bg-image) Next you’ll add opening and closing curly brackets, insert background-image:url(“”); and in between the quotations add the image of your choosing. You’ll also want to add the height, position, repeat and size to make sure the image appears how you want.

As you can see, it is quite simple to plug an image in as your background. There is so much space for customization that it can get quite addicting to play with. Just have fun with it and explore all your options. Can’t wait to see what you create next so be sure to connect with me at my LinkedIn below.