Geek asks and answers

How to repeat the background diagonally (only 1 time per line)

I want to repeat the background in a diagonal direction, not vertical or horizontal. Do you know a way to do this? For example, I want the chain to start from the upper left to repeat diagonally to the lower right. I was thinking of some kind of background re-solution with several images, one of which is useful in another way (cicada method), but did not do succed. Let me know if you know a solution for this.

+3
source share
3 answers

Create a rule :beforecontaining a background image and modify it:

.foo:before {
    display: block;
    background: url("myimage") repeat-x;
    position: absolute;
    height: 100px;
    top: -50px;
    left: 0;
    width: 200%;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin:  left center;
    -moz-transform-origin:  left center;
    -webkit-transform-origin:  left center;
    content: "";
    z-index: -1;
}

.foo {
    position: relative;
    overflow: hidden;
}

http://jsfiddle.net/r8BzE/

+4
source

( ) - (, 500x500) png , . , gif, .

- div.

, 50x50 png-, div 500x500.

10 divs, 50px (10%) , div +50 background-position-x.

#div1{
    background:transparent url(my_bg.png) 0px top repeat-y;
}
#div2{
    background:transparent url(my_bg.png) 50px top repeat-y;
}
#div3{
    background:transparent url(my_bg.png) 100px top repeat-y;
}

... css php , .

PHP:

<style type="text/css">
<?php
for ($i = 0; $i < 10; $i++){
    echo "#div$i{ background:transparent url(my_bg.png) ".(50*$i)."px top repeat-y; }";
}
?>
</style>

css div.

+2

, - :

http://jsfiddle.net/johnkpaul/8LmgF/

http://johnkpaul.tumblr.com/post/17057209155/wish-background-repeat-had-a-repeat-diagonal-option

:

.original-background{    
   background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
}

.diagonal-background:before{
  content:"";
  background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
  width:200%;
  height:200%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  -webkit-transform:rotate(-13deg) translate(10px,-220px); 
  -moz-transform:rotate(-13deg) translate(10px,-220px); 
  -o-transform:rotate(-13deg) translate(10px,-220px); 
  -ms-transform:rotate(-13deg) translate(10px,-220px); 
}

.diagonal-background{
  overflow:hidden;
}

But the easiest way is to make a background image. Here are some resources you can try:

+1
source

More articles:


All Articles