- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - background-repeat Property
The background-repeat property of CSS controls the repetition of images on a background. The image can be repeated along the horizontal and vertical axes, or not repeated.
The repeated images gets clipped as per the size of the element, but they can be resized such that they fit within the element, using round and space values for background-repeat property.
Possible Values
<repeat-style>: The values can be passed in a one-value or a two-value syntax format.
One-value syntax is a shorthand for two-value syntax. Following table shows the equivalent values of both the formats:
Sr.No | One-Value Syntax | Two-Value Syntax |
---|---|---|
1 | repeat-x | repeat no-repeat |
2 | repeat-y | no-repeat repeat |
3 | repeat | repeat repeat |
4 | space | space space |
5 | round | round round |
6 | no-repeat | no-repeat no-repeat |
In two-value syntax, the first value defines the horizontal repetition of the image and second value defines the vertical behavior. Each keyword is described in detail:
repeat: Image is repeated in order to fill the complete painting area. Image may be clipped to fit in the space.
space: Image is repeated as much as required, without clipping it. The white space is distributed evenly between the images and the first and last image is pinned to either side of the element.
round: Image gets stretched, if the space increases and if another image is added, they compress to accomodate it and fill up the space.
no-repeat: Image is set not to repeat.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundRepeat = "repeat | no-repeat | space | round";
CSS background-repeat - repeat Value
Here is an example to set the repetition behavior of the background image, as repeat:
<html> <head> <style> .repeat { background-image: url('images/tutimg.png'); background-repeat: repeat; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="repeat"></div> </body> </html>
CSS background-repeat - no-repeat Value
Here is an example to set the repetition behavior of the background image, as no-repeat:
<html> <head> <style> .no-repeat { background-image: url('images/tutimg.png'); background-repeat: no-repeat; width: 500px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="no-repeat"></div> </body> </html>
CSS background-repeat - repeat-x Value
Here is an example to set the repetition behavior of the background image, as repeat-x:
<html> <head> <style> .repeat-x { background-image: url('images/tutimg.png'); background-repeat: repeat-x; width: 800px; height: 300px; position: relative; } </style> </head> <body> <div class="repeat-x"></div> </body> </html>
CSS background-repeat - repeat-y Value
Here is an example to set the repetition behavior of the background image, as repeat-y:
<html> <head> <style> .repeat-y { background-image: url('images/tutimg.png'); background-repeat: repeat-y; width: 800px; height: 300px; position: relative; } </style> </head> <body> <div class="repeat-y"></div> </body> </html>
CSS background-repeat - space Value
Here is an example to set the repetition behavior of the background image, as space:
<html> <head> <style> .space { background-image: url('images/logo.png'); background-repeat: space; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="space"></div> </body> </html>
CSS background-repeat - round Value
Here is an example to set the repetition behavior of the background image, as round:
<html> <head> <style> .round { background-image: url('images/tutimg.png'); background-repeat: round; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="round"></div> </body> </html>
CSS background-repeat - repeat no-repeat Value
Here is an example to set the repetition behavior of the background image, as repeat no-repeat:
<html> <head> <style> .repeat-no-repeat { background-image: url('images/smiley.png'); background-repeat: repeat no-repeat; width: 500px; height: 100px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="repeat-no-repeat"></div> </body> </html>
To Continue Learning Please Login
Login with Google