February 17, 2013

repeating background

Hi Lydia

There are patterns on the internet that have been prepared for seamless repetition. You could quite likely use these without even having to upload the graphic file to your web site. All you would need to do is point your HTML/CSS code for the background to the proper location on the web.

Here's an example in which I will apply a seamless repeatable image to the background of a CSS (Cascading Styles Sheets) element. CSS/HTML elements are always blocks, so it’s relatively easy to create a callout box or other rectangular element with a background fill.

When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. — That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, — That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn that mankind are more disposed to suffer, while evils are sufferable than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security. — Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world.

The graphic for this is already on the internet at http://www.unsigneddesign.com/Seamless_background_textures/thumbs/seamlesstexture21_1200.jpg. In order to create the seamless background I used the HTML paragraph tag (<p>) and applied CSS code to create the background effect. The CSS code is as follows:

padding: 24px;
background-image: url('http://www.unsigneddesign.com/Seamless_background_textures/thumbs/seamlesstexture21_1200.jpg');
background-repeat: repeat

In order to make that work inside the HTML, you would code it as follows:

<p style="padding 24px;
background-image: url('http://www.unsigneddesign.com/Seamless_background_textures/thumbs/seamlesstexture21_1200.jpg');
background-repeat: repeat;">

That’s it. Let me know if that makes sense or is completely confusing.


  1. Rich,

    Most people prefer that you don't link to an image on their site (referred to as hot-linking), because it then puts an additional strain on their throughput bandwidth. I had a site that I webmaster get suspended last week, because of high throughput, due to a site linking to my images. And I had to block that site from doing so, before my hosting provider would reinstate my site.

  2. Very true. However... this post was to show someone how to accomplish posting a background image to an element. I was showing her that it can be done with an image hosted on your site, or it can be done with an image hosted on another site, such as Picasso, which is how it must be done on Blogger because the pictures posted to blogger don't go to blogger, they go to an external site and the CSS code has to point to that external site to make it work as a background element.


No personal attacks. No profanity.

Please keep your comments in good taste. Leave a name so we know who you are. Your comments are welcome, but anonymous flames and sacrilege will be deleted.