Codebits by David Medinets
2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018

07/11/2010: Using ImageMagick To Create Horizontally Repeating Background Image

Using ImageMagick To Create Horizontally Repeating Background Image
  1. Find an image that you want to slice vertically, which I'll refer to as the base image. This slice is what will be repeated across the background of the web page.
  2. Use the identify home_page.jpg command to find out some details about the base image. The result of this command looks like this: home_page.jpg JPEG 1300x1380 1300x1380+0+0 8-bit DirectClass 736KiB 0.240u 0:00.240
  3. For our purposes, the first set of numbers is sufficient. They hold the width and height.
  4. The next step involves extracting a vertical slice (top to bottom) from the base image. Use this command: convert -extract 10x1380+0+0 home_page.jpg body_background.png. Notice that you can vary the width of the slice using the first number. In this case, I use 10 but some other number is probably more appropriate for you.
  5. If you want to test various widths, you can 'tail' the background image using display -update 1 body_background.png which redisplays the image every second.
  6. Once you've got the vertical slice, you need to integrate it with your web page.
  7. Use CSS similar to this: 
    body {
  background-image: url('body_background.png');
  background-repeat: repeat-x;
}

subscribe via RSS