Creating Seamless Rotated Background Image

Creating seamless rotated background image

is the rotation is exactly 45 degrees, you'll have to find out the least common multiple of the width and height of your unrotated pattern.

• in your case, that's 15100 (width 100 and height 151)
• it would be much better to scale your pattern to width 100 and height 150, so the least common multiple is only 300

Take that number and some math (pythagorean theorem). Assume your number is the length of the two short arms and calculate the length of the hypotenuse - that's our result (make a square image of that size to get your pattern).

• in your case, that's 21355
• with resizing, it's ~ 424

Note that this is just typed straight from my head because i can't try it out practically at the moment - but i'm really sure it's correct.

edit: a fast (and messy) test got me to this:

• http://i.imgur.com/rZuu9.jpg
• http://jsfiddle.net/mPqfB/2/ (click the image-link first, otherwise jsfiddle doesn't show the image)

accidentally i made the pattern only be 423 in height and the rotation isn't perfect (don't have photoshop here), but it's good enough to prove that my math is correct.

Create a seamless, tileable image for an angled logo

OK, after some strenuous attempts I have cracked it, but only for a 45deg rotation. I'd be interested if anyone could offer advice on how to calculate the crop area for other angles.

• So the first step is to make a horizontal grid of logos like the last example in the question.
  Do this by placing the logo in the top-left of the canvas and then cropping the canvas so the logo just fits inside.

• Next, if necessary resize the canvas to approx the size of the image we want. Aspect ratio is not important at this stage, we just want to have a manageable image size to work work. Something like 250px wide is good. The result of this is likely that you'll have a wierd dimension for the other edge. E.g. 250px wide x 78px high.

• Now we pad the logo with empty space. This will have 2 purposes. First to give a good amount of space between the logos, and second to get a good aspect ratio. This is really important. Try to make your canvas so that one edge is 1/2 or 1/3 of the length of the other edge if possible. This will help us have as low a least common multiple as we can. When resizing the canvas ensure you keep the actual logo in the top-left of the canvas with the padding being from the right and the bottom of the image.

• We'll now want to manually tile the image, but also include the padded area. If we just copy this as it stands photoshop will ignore the padding area and only copy the logo itself. Make a new layer and put it in a layer folder with the logo layer. Fill this layer with a color.

• Now make a new photoshop doc. Make the canvas size pretty large; like 1000px x 1000px.

• Copy the layer folder you just made to this new doc by going layer->duplicate while it's selected and select the new doc as the destination.

• Now tile this folder by duplicating the layer and dragging it. Start by dragging the first copy down and then right. Photoshop helps with this by snapping the layer at key points to the original. You'll find that you can get the duplicated layer to snap when its top edge touches the bottom edge of the original layer, and half-way along the length so it's offset horizontally.

• Keep duplicating and snapping in place until you've mostly covered the large canvas with the tiles.

• Now to make a crop that will produce a tileable image. Get the select tool and choose the fixed size option. Enter in a pixel size that makes the selection a square with edges the same length as the longer of your original image. I.e. If your original image was 150px x 50px then you should make your crop size 150px x 150px.

• Click anywhere on your canvas to make the selection, copy-merged to a new doc, and you should find you'll have tileable image you can use, albeit with horizontal logo.

• Now to rotate it. Go to the large tiled doc. Ctrl-D to deselect. Edit-> Rotate the canvas 45deg.

• Now calculate the size of your crop. This is as follows:

  1. Find the least common multiple. So if your dimensions are 150x50 LCM = 150.

  2. The size of your crop box is the hypotuse of a right-angled triangle with the other edge lengths = to the LCM. I.e if LCM = 150, L = sqrt(150² * 150²) = 212.12.

• Now make a square crop of size 212 (in this case) of the rotated canvas (anywhere will do). This should be a tileable image you can save, resize, edit etc.

This method worked a treat on my company's Twitter page

As I said, any method to calculate the crop size for other angles would be helpful.

HTML5/CSS3 - how to make endless rotating background - 360 degrees panorama

The main idea behind the rotating background is that you draw two images: one at (x, 0) and another at (x - w, 0) with w being the width of the image. You can increase x over time, and as soon as x === w you reset x = 0. You won't visually see this reset because the second image is positioned at the exact same position as the first. After resetting, you can start all over again, so that the rotating looks endless.

(I'm using two images assuming width of container <= width of image.)

You could use e.g.:

• Canvas: http://jsfiddle.net/yQMAG/. This animation is a bit jerky on my machine.
• CSS3 animations: http://jsfiddle.net/k5Bug/.

Why is the second background image not displaying after rotating my device?

The issue was not in the code, but in the background image itself, which turned out to be too large for Chrome on Android. It seems images 4000 pixels in width or larger are not supported.

Even though the original file was relatively small (35 kb), the dimensions were quite large – 8050 x 768 pixels. I originally made it this large in order to ensure it would be seamless even on 8k screens. I never intended mobiles to use the large image, but it picked it up anyway in landscape mode due to the high resolution of the device.

My solve is to now have 3 versions of my cutout background image (1 for mobile, 1 for screens smaller than 4000 pixels and 1 for larger screens) and call them with media queries.

Using Chrome's feature to remote debug an Android device was very helpful to troubleshoot this issue, in case that might help someone else with problems that inexplicably only appear on Android. ;)

Line-up border-image with background-image;

This answer is based off your revised code that sort of uses my hexagon technique. With respect to avoiding the graphic alignment issue you noted, I have two suggestions.

1. Have your images scaled to the size you want them already so that you avoid any background-size scaling like you are currently doing.
2. Likewise, avoid the scaling of the .inner divs by 200% in the width and height (you shouldn't have to do that, they should be the same size as the .hexagon div and the immediate children that you have classed as .before and .after). However, with regards to that...

... I'm curious why you used a .inner div at all, instead of the :before pseudo elements (to avoid cluttering your code). It appears to me that you may not understand what a pseudo element is (since you have a content: ''; in your .inner css, which is irrelevant if it is not a pseudo element but a real element). Either that, or you accidentally left that code in there when you switched from a pseudo element to a real div (for whatever reason that switch was made).

CSS: Creating textured backgrounds

with latest CSS3 technology, it is possible to create textured background. Check this out: http://lea.verou.me/css3patterns/#

but it still limited on so many aspect. And browser support is also not so ready.

your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:

http://subtlepatterns.com

How to make an app's background image repeat

Ok, here's what I've got in my app. It includes a hack to prevent ListViews from going black while scrolling.

drawable/app_background.xml:

<?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/actual_pattern_image"
        android:tileMode="repeat" />

values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <style name="app_theme" parent="android:Theme">
    <item name="android:windowBackground">@drawable/app_background</item>
    <item name="android:listViewStyle">@style/TransparentListView</item>
    <item name="android:expandableListViewStyle">@style/TransparentExpandableListView</item>
  </style>

  <style name="TransparentListView" parent="@android:style/Widget.ListView">
    <item name="android:cacheColorHint">@android:color/transparent</item>
  </style>

  <style name="TransparentExpandableListView" parent="@android:style/Widget.ExpandableListView">
    <item name="android:cacheColorHint">@android:color/transparent</item>
  </style>

</resources>

AndroidManifest.xml:

//
<application android:theme="@style/app_theme">
//

---

Related Topics