CSS Background repeat round to one direction only in Firefox
Question
I wanted to combine backround-repeat round and repeat-x . On many different web pages I saw that background-repeat: round equals to background-repeat: round round that means Round times repeat to X and round times repeat to Y , isn't it so? That's why I thought that writing round no-repeat would repeat to one direction only.
My code repeats to all directions. I'm using Firefox 30.0 .
<!DOCTYPE html>
<html>
<body style="background-image: url('bg.png'); background-repeat: round no-repeat">
</body>
</html>
Is it browser specific or should I do other way if there is a way?
3 answers
solution1
2 ACCPTED 2014-07-09 01:07:54
Yes, it should work like you thought.
The problem is that Firefox doesn't support the value round yet. Then, the rule is ignored, and the value used is the default repeat .
You can see browser support in MDN article :
- Chrome: no
- Firefox: no ( bug 548372 )
- IE: 9
- Opera: 10.5
- Safari: no
As a workaround, I suggest using a fallback value:
background-repeat: repeat no-repeat; /* fallback for old browsers */
background-repeat: round no-repeat; /* for browsers that support it */
solution2
0 2014-07-09 01:09:07
According to the MDN page on background-repeat , and this issue on Bugzilla , background-repeat: round; is only supported on IE 9 and Opera. Because Firefox does not recognize the round keyword, it is defaulting to the default background-repeat: repeat; .
It is not supported in Firefox 30, and it's currently unknown when it will be implemented in Firefox.
solution3
0 2014-07-09 01:11:02
It is browser specific since only a couple of browsers do support it. My suggestion to work-around is below: I would only use background-repeat:repeat no-repeat .
As for the "round" vs "round round" this is something we see a lot. Let me explain:
If only one argument given eg. "repeat" it applies in all directions.
If two arguments is given, these defines the X & Y direction eg. "repeat no-repeat"
the first indicates the x, and the second the y.
If three is given, we have "top", "sides" and "bottom" eg. "margin: top sides bottom"
If four, we have "top, right, bottom, left"(clockwise) eg. "margin: top right bottom left"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.