image

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.

Jacklyn Wurtz

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.

About the author
placeholder image
Name of Author
Jacklyn Wurtz is a former preschool teacher of eight years, now mother of two young children who is actively pursuing a career in computer programming. Early childhood education has helped her develop exceptional time management and organization skills. Through her interactions with children and parents alike, her communication skills have been refined allowing her to connect with all audiences and convey clear messages. While she learned a lot through her work with children in a preschool setting, she is excited to further her education and explore other areas of interest. She is currently enrolled with the MomsCan:Code School where she is learning the fundamentals of coding. Upon the completion of this course, she is hopeful to start her career utilizing her newly acquired skills.

Learn Digital Skills

Find out when the next cohort begins!

The most comprehensive program to up your game in the remote career world.

Learn More
Back