Background Image no-repeat
Definition
- The
background-repeat
property sets how a background image will be repeated. - By default, a
background-image
is 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 |