How To Stop Background Repeat In Html

How to Make a Groundwork Paradigm Not Repeat

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

The above case uses the background-echo holding to ready the prototype to no-echo. This prevents the image from repeating beyond the full width and height of the chemical element.

The original prototype looks like this:

And then past using no-repeat, nosotros are simply making the background image announced as it is, without repeating.

Repeat Horizontally

Yous can also prevent an image from repeating vetically, while assuasive it to repeat horizontally (and vice versa).

To make a background prototype repeat horizontally, use background-repeat: repeat-x

Echo Vertically

You lot can make a background prototype repeat vertically by using background-repeat: repeat-y

The `groundwork` Shorthand Property

The background property is a shorthand belongings that allows you to set multiple properties at once. You tin can employ it to set both your image location and its repeating property in 1 identify.

Using the background shorthand holding will permit y'all to add other background properties, such equally color, background size, position, and more than.

Use background-position to specify the position your background epitome appears inside its container and/or background-size to specify how large the groundwork should announced. These tin can also exist specified in the background autograph property.

Putting Styles into an External Fashion Canvas

The above example uses inline styles merely could just equally easily accept used an external way canvas or an embedded style canvass (styles embedded in the document head).

If you place the code into an external way sheet, here's a snippet of what that might look like:

(Note that I use background-repeat on one line and background on the other — both will acheive the same result).

Here's a snippet of what the HTML code could await like:

Calculation the above external way sheet volition ready a background image against the <body> chemical element. Information technology won't repeat because I've specified no-echo.

This example also sets a background image against a class that I called .myBox. Now, any HTML chemical element that uses that grade will accept the groundwork paradigm applied to information technology. It volition repeat horizontally because I specified repeat-x.

Why Set 'no-repeat'?

Setting 'no-repeat' is optional. The default behavior of a background paradigm is to repeat across the full width and tiptop of the element that it's practical to. Of grade, you lot'll but meet this consequence if the background image is smaller than its container. Information technology will echo as many times as necessary until it covers the whole element. If the image is the aforementioned size or larger than its container at that place will exist no need to echo (and of class, no way to repeat) as information technology already covers the whole container.

The groundwork-repeat property gives y'all control over how your epitome repeats.