DIY: Perfect Fit Background Image

If you don’t want a plain color as the background of your website, you may want to think about using an actual image.  There are many ways to do this, but a majority of these ways require you to do extra work in order to make your image fit exactly to your page.  However, there is a simple bit of code that makes it possible to fit your image to your background in CSS.

So, to show you, I decided to make this picture of Lin-Manuel Miranda my website’s background:


First, I opened up the html file and CSS file for my website’s homepage.


I had originally set my background to a flat color, so I had to erase the part of my code where I put in the blue.  If you don’t already have a background, all you have to do is open your files.

The code that makes the background image fit perfectly is this:

Screen Shot 2017-04-05 at 10.26.12 AM.png

The only difference when we use is is that in the parentheses next to “url”, we’ll put the name of the file that we want to use as our background image.

I put this code into my CSS page, and put in my file name “lin.jpg”, to set the image as my background.

Screen Shot 2017-04-05 at 10.28.57 AM.png

Then, I saved both my CSS and my html pages, and Lin was fit perfectly to my background.

Screen Shot 2017-04-05 at 10.29.26 AM.png

Hope this helped!

To find out more, (or really just the same information I just gave), click here



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s