Background Image No Repeat Code Example

Last Updated On Friday 17th Jun 2022

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
background image repeat x
background repeat repeat y
no repeat css
background no repeat
html background image no repeat
html image no repeat
background image no repeat
html background no repeat
css no repeat
background no repeat html