A CSS Property that defines whether or not background property of an element should "tile" to fill the entire element if the background is smaller than the element. This can be broken up into background-repeat-x for horizontal repeating and background-repeat-y for vertical repeating. The background repeat properly is typically used with an image for the background property.
Questions tagged [background-repeat]
71 questions
39
votes
2 answers
CSS, background-repeat distance
I want to set a background-image but with an specific distance between the repetitions.
For example, I have this image to become a background-image:
And I want to fix the repetitions in a pattern like this:
Check the JSFiddle playground
I'm…
fguillen
- 36,125
- 23
- 149
- 210
11
votes
1 answer
CSS sprite image + background-repeat a part of it
Can I repeat a part of an image [which it's in a CSS sprite image] in the background ?!
like for example :
background-position : -13px top ;
background-repeat : repeat-y ;
because I got the whole sprite image repeated ...
Waseem
- 111
- 1
- 4
11
votes
1 answer
can you create space between background image repeats?
Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts.
i.e. background: url(img.png) [after 40px] repeat-x;
I don't want to add empty space to the image.
gcoulby
- 534
- 2
- 10
- 20
8
votes
1 answer
Background-repeat: space seems to stop working when parent gets too wide
I've been playing around with space and round values for background-repeat. In theory this should mean I can use a radial gradient to create a nice dotted border on an element without the dots being cut off.
.test {
background-repeat: space…
SpaceBeers
- 13,617
- 6
- 47
- 61
5
votes
2 answers
A repeat-y background-image disappears/misaligns when zooming out
The image disappears when zoomed out to 40% on Firefox. Up until zoom 50%, it is fine. However at zoom 40%, it just vanishes:
Whereas in Chrome the image is still visible but slightly misaligned, this happens at different levels of zoom:
For once…
jaunt
- 4,978
- 4
- 33
- 54
5
votes
1 answer
ActionBarSherlock background does not repeat on pre ICS versions
I'm moving my app's ActionBar to ActionBarSherlock and I'm trying to customize the background with a tiled background. I'm testing my code on 2 real devices, one running Android 2.1 and the other running Android 4.0.4.
The code below is working on…
rfgamaral
- 16,546
- 57
- 163
- 275
4
votes
3 answers
CSS: Background-position + repeat = not working
Anybody encounter this kind of problem with CSS before?
I have a header that's set to 100% width, with an image on the left side (500px wide). I have a background-image which I'd like to fill in for the remaining space horizontally, but not where…
Rabu
- 43
- 1
- 4
4
votes
1 answer
How to get a transparent background image to repeat
I would like to get the effect shown here:
http://jsfiddle.net/abalter/k8G3C/
The background image is transparent. The logo and text overlay.
The problem is, I want the background image to repeat-y. It's fine with a wide viewport, but when the…
abalter
- 9,663
- 17
- 90
- 145
3
votes
2 answers
Position video and make it repeat in background like images
Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties? I'm sure this isn't possible with the current version of CSS but maybe there is…
nosh
- 620
- 3
- 14
- 50
2
votes
2 answers
CSS repeat-x BUT only a part I want in an image
I used background-size: cover for mobile screen sizes.But, for desktop, if I use background-size: cover, I can't see the cat in my image. Because, the original size of my image is that the height is much longer than the width.So, I would like to…
Lim
- 753
- 14
- 31
2
votes
0 answers
Repeated background image in Chrome v47
Since the upgrade to Chrome 47 printing web pages gives a problem. We have a background image that is repeated on each printed page. Since Chrome 47 this image is in low resolution/bad quality. If the image is not repeated the quality is…
user2054008
- 21
- 2
2
votes
2 answers
Background-image cuts off on top, left, and right points of a CSS circle
I am having a problem with an image getting cut off on the top, left, and right points of my div. When I don't set background-repeat: no-repeat; the image repeats on only those three points which makes an awkward feel to…
Josh Powell
- 6,219
- 5
- 31
- 59
2
votes
2 answers
Why background-repeat: no-repeat doesn't work with .svg images in Opera 12?
I got stuck with a strange problem in Opera 12: I have an .svg image which is linked within my css code. When I resize to zoom-out the page where the image is displayed, Opera repeats the image as if I didn't use the "no-repeat" value in…
tonix
- 6,671
- 13
- 75
- 136
2
votes
2 answers
css background image repeat until specific height
Is there a CSS way to stop a repeating background image at a specific position?
HTML:
This is the content
CSS:
.container
{
height:100%;
}
.bgimage
{
…
lickmycode
- 2,069
- 2
- 19
- 20
2
votes
1 answer
CSS Background : Adding left padding via using repeat-x with single element
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
Title
CSS : h2 {background:url('line.png') repeat-x 15px 10px;} Result : Live : http://jsfiddle.net/5G2aq/ I try to repeat…
l2aelba
- 21,591
- 22
- 102
- 138