0build.dev
Choose a layout

background-repeat

Report an Issue
Class Description

bg-repeat

Sets background-repeat: repeat.

CSS Rules 

.bg-repeat {
  background-repeat: repeat;
}

Usage 

<element class="bg-repeat" />

Responsive

Prefix .bg-repeat utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-repeat" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-repeat:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-repeat:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-repeat::before" />

<element class="content-after bg-repeat::after" />
 .bg-repeat Sets background-repeat: repeat.

bg-repeat-x

Repeats the background image only horizontally.

CSS Rules 

.bg-repeat-x {
  background-repeat: repeat-x;
}

Usage 

<element class="bg-repeat-x" />

Responsive

Prefix .bg-repeat-x utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-repeat-x" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-repeat-x:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-repeat-x:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-repeat-x::before" />

<element class="content-after bg-repeat-x::after" />
 .bg-repeat-x Repeats the background image only horizontally.

bg-repeat-y

Repeats the background image only vertically.

CSS Rules 

.bg-repeat-y {
  background-repeat: repeat-y;
}

Usage 

<element class="bg-repeat-y" />

Responsive

Prefix .bg-repeat-y utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-repeat-y" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-repeat-y:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-repeat-y:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-repeat-y::before" />

<element class="content-after bg-repeat-y::after" />
 .bg-repeat-y Repeats the background image only vertically.

bg-repeat-space

Spaces the background image evenly without clipping.

CSS Rules 

.bg-repeat-space {
  background-repeat: space;
}

Usage 

<element class="bg-repeat-space" />

Responsive

Prefix .bg-repeat-space utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-repeat-space" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-repeat-space:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-repeat-space:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-repeat-space::before" />

<element class="content-after bg-repeat-space::after" />
 .bg-repeat-space Spaces the background image evenly without clipping.

bg-repeat-round

Scales the background image to fit exactly an integer number of times without clipping.

CSS Rules 

.bg-repeat-round {
  background-repeat: round;
}

Usage 

<element class="bg-repeat-round" />

Responsive

Prefix .bg-repeat-round utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-repeat-round" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-repeat-round:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-repeat-round:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-repeat-round::before" />

<element class="content-after bg-repeat-round::after" />
 .bg-repeat-round Scales the background image to fit exactly an integer number of times without clipping.

bg-no-repeat

Sets background-repeat: no-repeat.

CSS Rules 

.bg-no-repeat {
  background-repeat: no-repeat;
}

Usage 

<element class="bg-no-repeat" />

Responsive

Prefix .bg-no-repeat utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:bg-no-repeat" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="bg-no-repeat:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="bg-no-repeat:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before bg-no-repeat::before" />

<element class="content-after bg-no-repeat::after" />
 .bg-no-repeat Sets background-repeat: no-repeat.