You may have read some of our HTML image tutorials. If so, then you’re probably well tuned to selecting interesting image backgrounds for your web page, but have you ever explored the dynamic range of your image background size?
There are multiple ways to modify a background image that will yield a variety of fascinating results, but there are a few steps you’ll have to take to do this proficiently.
In this tutorial, we will explore various ways to be creative with your background image and will show you the results from utilizing various CSS techniques.
Let’s get started.
Playing with CSS to Set Your Background Image Size
In this section, we are going to provide you with actual code samples that you can try out and modify on your own. To make it easy, you are going to put these CSS styles directly into a simple HTML page. Let’s start in and create an HTML page.
Do the following:
- Open a new folder and name it. The actual folder name does not matter. Name it anything you like.
- Open a text editor such as Notepad,
- Paste the following example text into the text editor.
- Save the file as bgimage.html.
- Find a web-optimized image you want to work with and paste the image into the same folder where you are storing your HTML file. In the following example, we have named our image “beach.jpg” because it is a jpeg image file.
| <!DOCTYPE html><html><head> <style> body { background: url(“beach.jpg“); background-size: 50%; } </style></head><body> </body></html> |
To make things easy, all we need to do is play with the settings in this one line of code highlighted here for you.
| body { background: url(“beach.jpg”); background-size: 50%; } |
In this case, the beach.jpg background image set to background-size: 50% will yield the following results that reduce the size of the image across the screen by 50%. Additionally, the image automatically repeats to fill the screen and does so in a uniform manner.
Now to modify this to get something really different, we use the value “contain” to produce the following.
| body { background: url(“beach.jpg”); background-size: contain; } |
To get a full-size image let’s try making it 100% and see what happens. Modify the line of code as you see in the following example.
| body { background: url(“beach.jpg”); background-size: 100%; } |
Now you see this beautiful image in full screen size.
Now, if you want to take control of the actual pixel width and height, we can use the following code:
| body { background: url(“beach.jpg”); background-size: 100px 100px; } |
This will yield the following example. Remember that when you are viewing this on a full size laptop or desktop monitor, you will be able to see the full results of your web layout.
Of course, there is the fallback value of “auto” that many designers will use on web pages but as you can see, this does not always bring the best results.
Now for our last background example, we will utilize “cover” to see how this displays.
| body { background: url(“beach.jpg”); background-size: cover; } |
As you can see, this image covers the page nicely.
To recap this tutorial, we have explored using the following values to modify the background image on our web page:
- background-size: 50%;
Stretches the image in the corresponding dimension to 50 percent of the background positioning area. - background-size: contain;
Scales the image as large as possible within its container without cropping or stretching the image. - background-size: 100%;
Stretches the image in the corresponding dimension to 100 percent of the background positioning area. - background-size: 100px 100px;
Controls the Width and Height of the image and displays the image in a grid according to the screen size. - background-size: auto;
Scales the background image in the corresponding direction such that its intrinsic proportions are maintained. - background-size: cover;
Scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
Our recommendation is that you utilize your CSS background image size skills and customize the settings rather than allowing for an “auto” setting. Why allow anyone else to determine your destination when you can harness the creative skills yourself.
Now, you can be as artistic as you like to create your background web image in any format you desire. Always keep the visitor to the page in mind to enhance their experience.
Where to Next?
This introduction to the background image size should provide a starting point for further inquiry into web page management and the unlimited creative aspects that HTML offers.
In upcoming blogs, you will be able to explore other areas of HTML design. Continue to be inspired, explore further, and dive deeper into the world of web design.
You might also want to explore some related areas that can assist you further such as CSS Basics: Beginner-friendly Guides to CSS, and Working with Images and HTML.
Enroll in our Intro to Programming Nanodegree program today!
