Using a background for an HTML page is a great way to provide extra style and substance for the user experience. Using the CSS Background Repeat property is a direct option to let the background fill the space in use for the page.
However, there is more to this property than simply repeating the image over and over. In this tutorial, you can take a look at how to fine-tune the values of repetition for the perfect background needs.
CSS Background Repeat Basics
You will want to set up a basic image for use in the CSS file. In the code example below you can see we are using a locally sourced image titled “Moose.JPG.”
html { background-image: url("Moose.JPG"); }
By default, the CSS will take this image, size it out, then place it on a repeated plane of both the X and Y-axis. This provides the image example you see below. Note that a small div box was added in the HTML to provide a visual context of the page content for reference.
As you can see, the image repeats over in this default setting. However, we can alter this by changing the values of the background-repeat property.
CSS Background Repeat Property Values
No-Repeat
The first property value to look at is the simple removal of the repetition itself. This can be done by adding the “background-repeat” property to the CSS file and then providing the value of “no-repeat.” This is shown in the code example provided below.
html {
background-image: url("Moose.JPG");
background-repeat: no-repeat;
}
With this bit of code applied and saved, you can see the background image on the HTML page now only displays once without being repeated over the entire background.
Repeat-X & Repeat-Y
Another option is to allow the repetition of the background image on the X or Y-axis specifically. This can be achieved by using the value of “repeat-x” or “repeat-y” respectively. In the example below, you can see that the value of “repeat-x” is used to have the image repeat only on the horizontal X-axis of the HTML page.
html {
background-image: url("Moose.JPG");
background-repeat: repeat-x;
}
Alternatively, we can alter the code to use the Y-axis repetition instead which provides the following example.
html {
background-image: url("Moose.JPG");
background-repeat: repeat-x;
}
Background Position
The repeated background image can also be altered via the background-position property to further provide control to the display. This is used by adding the “background-position” property and then feeding it a directional value to use, (center, left, right, top, or bottom). You can even compound this to further refine the value, such as “top right” or “bottom left.” See the code example below.
html {
background-image: url("Moose.JPG");
background-repeat: repeat;
background-position: bottom right;
}
This will provide the following result with the HTML page.
Take note that what may seem like a simple change can impact the content of the page more than would be expected. See the example of the small code change below where the background-position value was set to “top left.”
html {
background-image: url("Moose.JPG");
background-repeat: repeat;
background-position: top left;
}
This will provide the following background output for the HTML page.
As you can see, the image is now repeated in a more uniform appearance than before. It is a good idea to scope out the concepts of where you want the content to appear on the page in conjunction with how the background will be displayed. By failing to consider the output it is possible to create obstructions that can cause confusion on navigation or general use for the end-user.
Background Space
The use of the “space” value allows the background to repeat with an inserted whitespace that intends to provide a visible break of the image repetition. You can see this implemented in the sample CSS code shown below.
html {
background-image: url("Moose.JPG");
background-repeat: space;
}
In the example image shown below, you can see the clearly intended whitespace provided in between the background image as it repeats on the page.
Background Round
On our final option to look over, we have the value of “round.” The “round” option will instruct the browser to take the provided image and stretch it out across the page background. This will not provide the aforementioned intended whitespaces as you saw with the “space” option.
This is important to note as it can create some oddly proportioned background if not taken into consideration. See the example code below on how to apply the value.
html {
background-image: url("Moose.JPG");
background-repeat: round;
}
In the example image below, you can see the image is applied on repetition as normal. However, the constraints placed on it have changed its appearance in the applied use.
In this usage, it makes sense to once again stop and consider the general UI and UX of your page design. Using the wrong image or the wrong property/value can result in a site that has unforeseen navigation or experience issues.
Note: A good rule of thumb is to also consider how the applied effects will alter the image on various devices or pages of the site. Just because it appears well in one area, does not mean it carries over in totality.
Is There More?
To answer the question directly, yes there is a great deal more to take into consideration. For example, you can alter the size of your background to cover the entire page or constrain it within your defined variables. Other options allow you to work with the background-origin itself which can allow for padded effects and more.
These properties and values can be combined in use with the information provided in this tutorial to further enhance the use of the CSS Background Repeat option to really take control up a notch.
Consider this even more so when it is worked into the multitude of various other CSS controls. If you are already in this far, consider having some fun with the other options to see just how creative you can be.
___________________________________________________________________
The modern world runs on code and that code comes from people like you. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree today to start the journey.
