How to Make a Background Image Not Repeat
The above example uses the
background-repeat property to set the image to
no-repeat. This prevents the image from repeating across the full width and height of the element.
The original image looks like this:
So by using
no-repeat, we are simply making the background image appear as it is, without repeating.
You can also prevent an image from repeating vetically, while allowing it to repeat horizontally (and vice versa).
To make a background image repeat horizontally, use
You can make a background image repeat vertically by using
background Shorthand Property
background property is a shorthand property that allows you to set multiple properties at once. You can use it to set both your image location and its repeating property in one place.
background shorthand property will allow you to add other background properties, such as color, background size, position, and more.
background-position to specify the position your background image appears within its container and/or
background-size to specify how large the background should appear. These can also be specified in the
background shorthand property.
Putting Styles into an External Style Sheet
If you place the code into an external style sheet, here's a snippet of what that might look like:
Here's a snippet of what the HTML code could look like:
Adding the above external style sheet will set a background image against the
<body> element. It won't repeat because I've specified
This example also sets a background image against a class that I called
.myBox. Now, any HTML element that uses that class will have the background image applied to it. It will repeat horizontally because I specified
Why Set 'no-repeat'?
Setting 'no-repeat' is optional. The default behavior of a background image is to repeat across the full width and height of the element that it's applied to. Of course, you'll only see this effect if the background image is smaller than its container. It will repeat as many times as necessary until it covers the whole element. If the image is the same size or larger than its container there will be no need to repeat (and of course, no way to repeat) as it already covers the whole container.
background-repeat property gives you control over how your image repeats.