Background Image no-repeat
Definition
- The
background-repeatproperty sets how a background image will be repeated. - By default, a
background-imageis repeated both vertically and horizontally.
Syntax
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
background no repeat css
| Value | Description |
|---|---|
| repeat | This is Default. Image is repeated both vertically and horizontally. |
| repeat-x | Repeated only horizontally |
| repeat-y | Repeated only vertically |
| no-repeat | It is not repeated. The image will only be shown once |
| space | It is repeated as much as possible without clipping. |
| round | It is repeated to fill the space |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
no-repeat css
div { width: 300px; height: 300px; border: 1px solid gray; background-image: url(image/logo.png); background-repeat: no-repeat; }
Along the X axis
div { width: 300px; height: 300px; border: 1px solid gray; background-image: url(image/logo.png); background-repeat: repeat-x; }
Along the Y axis
div { width: 300px; height: 300px; border: 1px solid gray; background-image: url(image/logo.png); background-repeat: repeat-y; }
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Property | Chrome | Edge | Mozilla | Safari | Opera |
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |