How Do You Stop A Background Image From Repeating?

How to Make a Background Image Not Repeat

To make a groundwork image non repeat in HTML, specify no-echo in the background-repeat property or the groundwork shorthand holding.

The above example uses the background-repeat property to fix the epitome to no-repeat. This prevents the image from repeating across the full width and elevation of the element.

The original image looks similar this:

So by using no-repeat, we are but making the background image appear as information technology is, without repeating.

Repeat Horizontally

You can also preclude an image from repeating vetically, while allowing it to repeat horizontally (and vice versa).

To make a groundwork epitome repeat horizontally, use groundwork-repeat: echo-10

Repeat Vertically

Yous tin can make a groundwork image repeat vertically by using background-repeat: repeat-y

The `background` Autograph Property

The groundwork property is a shorthand property that allows you to set up multiple properties at once. You can use it to set both your paradigm location and its repeating property in one place.

Using the background shorthand property will allow yous to add other background properties, such every bit color, background size, position, and more.

Employ background-position to specify the position your background paradigm appears within its container and/or groundwork-size to specify how large the background should appear. These tin also be specified in the groundwork shorthand holding.

Putting Styles into an External Style Sheet

The in a higher place case uses inline styles merely could but as hands accept used an external style sheet or an embedded style sheet (styles embedded in the certificate head).

If you place the lawmaking into an external style canvas, here'southward a snippet of what that might wait like:

(Note that I utilize groundwork-repeat on one line and groundwork on the other — both will acheive the aforementioned result).

Here'south a snippet of what the HTML code could look like:

Adding the higher up external style sheet will gear up a background epitome against the <trunk> element. Information technology won't repeat considering I've specified no-repeat.

This example too sets a background image confronting a course that I called .myBox. Now, whatever HTML element that uses that class will have the background image applied to it. Information technology volition repeat horizontally because I specified echo-x.

Why Set 'no-repeat'?

Setting 'no-repeat' is optional. The default behavior of a background image is to repeat across the full width and meridian of the element that it's applied to. Of course, you lot'll just see this effect if the background image is smaller than its container. Information technology volition repeat every bit many times equally necessary until it covers the whole element. If the epitome is the aforementioned size or larger than its container there volition be no need to repeat (and of form, no manner to repeat) as it already covers the whole container.

The background-repeat property gives you control over how your image repeats.