How crop you a diagonal pattern in a way that makes tiled for the web?

web-back-pattern1.jpg

At the moment I just abandoned and made a huge image and kept to about 800kb for a web context. However, I realize that's not ideal. I can't understand how this model of mosaic. I think there are some crazy math that I must calculate to be included in the importance of the harvest, so that the threshold for images fit perfectly, but I have no idea how to do that. Anyone ran into this situation before and found a solution?

You're hurting! :-)

Use css to solve this problem. Although there is no css property to rotate a background image, you can apply a trick to create the same effect.

(1) save your file with a regular rectangular pattern (17.6 kb):

(2) save this in your image folder in the root of your site.

(3) to create a background rotated to your page, use this:

{body

position: relative;

background: url('.. / img/bgrot.jpg') repeat 0 0;

}

body: before {}

content: "";

position: fixed;

Width: 200%;

height: 200%;

top: 50%;

left: 50%;

z-index:-1;

background: url('.. / img/bgrot.jpg') repeat 0 0;

-webkit-transform: rotate(-20deg);

-moz-transform: rotate(-20deg);

-ms-transform: rotate(-20deg);

-o - transform: rotate(-20deg);

transform: rotate(-20deg);

}

Fact! Much easier and more flexible. To see it work, see the test I did to http://estructor.altervista.org/rotbg/test.html

You can examine the code in your browser.

PS the css transformations are not supported in IE 8 - the background will show again, although (non-tourne). IE8 will be might want to use a conditional comment in your html code to create a conventional background pattern instead.

* Update * I've updated the example with a wrapper page element that uses the same context, but it runs at a different angle. The trick here is to create a sufficiently broad element that covers the entire area. Then you must set the overflow: hidden; to hide the overflow so it contains the background pattern within this box. It takes a bit of tinkering to get work for the height and width values, because it is somewhat dependent on the actual content.

Tags: Photoshop

Similar Questions

Maybe you are looking for

  • New tab. Show only the URL by default; no history

    My default URL is 'google.com'. When I open a new tab, I want to show him as "google.com" and nothing else. Can you help me to do? I am running MAC OSX 10.9.5.

  • Re: Downgrade from Win 7 64 bit to 32 bit

    I bought a Satellite T110-11U with embedded OEM Win 7-64 bitI tried to get you with the media recovery tool, but the Control Panel won't let me choose between the 32/64 bit modeMost of the software used in my business need to the 32-bit mode I also t

  • What accessibility tools should I use in Windows Vista?

    Original title: accessibility + my hands hurt + having hard type What tools/tools accessability could I try to use, I had problems with both of my hands and arms. They were cramping and a lot more for several months. He was not a constant, but the fr

  • Power supply and graphics card update

    Hello I own a HP p6610f desktop computer and want to upgrade my power supply and graphics card. Power supply: I saw recommended Corsair CX500 and I found a CX500M of Corsair for sale. I'm fairly certain that it will work with the graphics card, I'm c

  • EOS\EOL 15305, 15310

    Recently, I saw the announcement of EOL EOS 15305 15310 and I sow substitutes. That Cisco has plans to develop new platforms to access?