Background Repeat
Background-repeat properties basically used in CSS to repeat the images in Horizontal and vertical Direction.
as we say that background images repeated in X-axis and Y-axis direction.
images repeat properties is used to cover the whole background area, which covered the in the horizontal and vertical direction.
1 2 3 4 5 |
#homebanner { background-image: url(banner.png); background-repeat: repeat-x; background-repeat: repeat-y; } |
let’s discuss all possible values for Background-repeat property:
repeat: this value is used as a default value, means that this value work (for images) in both direction (x-axis and y-axis)
1 2 3 4 |
#homebanner { background-image: url(banner.png); background-repeat: repeat; } |
1 2 3 4 |
#homebanner { background-image: url(banner.png); background-repeat: repeat-x; } |
1 2 3 4 |
#homebanner { background-image: url(banner.png); background-repeat: repeat-y; } |
1 2 3 4 |
#homebanner { background-image: url(banner.png); background-repeat: no-repeat; } |
here, one thing is that If multiple images can fit with leftover space, squish them or stretch them to fill the space.
If it’s less than half one image width left, stretch if it’s the more, stretch.
1 2 3 4 |
#homebanner { background-repeat: repeat repeat; background-repeat: round space; } |
on thing more If multiple images can fit, space them out evenly images always touching the edges.
1 2 3 4 |
#homebanner { background-repeat: repeat repeat; background-repeat: repeat space; } |