How to create seamless tile with attached image

Posted on 2010-11-27
Last Modified: 2013-11-19

I have received a design that I am supposed to build out with CSS. The problem I'm having is I can't figure out how to make a seamless tile out of the attached background image.

What they want is for the top 1/4th of the image to be at the top of the site, the bottom 1/4th of the image to be at the bottom, and the middle 2/4ths to seamlessly tile in the middle so that the page background can expand in height to accommodate pages with more content.

Is it possible to create a seamless tile as outlined with this image? I've created seamless tiles in the past, but it was always with a texture, not with a full painting like this. If it is not possible, can anyone recommend what changes would need to be made to allow it to be possible?

Any help is greatly appreciated! I'm kind of stumped!
Question by:Spiderstave
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
LVL 23

Accepted Solution

jeremyjared74 earned 500 total points
ID: 34224052
The simple answer is no, you cannot create a seamless background for a web-site using that image. You could create a background that is fixed using the image so it would cover different sizes. This method would result in the background image not scrolling.

Author Comment

ID: 34226978
Thanks for your thoughts on the issue.

I ended up creating a mirror of the top and blending it into the bottom. It's not exactly what the design called for, but it will work, and it allows me to tile that background.
LVL 23

Expert Comment

ID: 34227159
Technically I did answer the question. It isn't possible to create a seamless background with the image.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 34227234
That's not true, I did create a seamless background (attached).
LVL 23

Expert Comment

ID: 34227272
Technically that isn't a seamless background. View the definition from

Definition: A seamless background is a pattern, design or texture that covers the entire Web page. Seamless backgrounds, or seamless tiles, are small graphics, normally 100 by 100 pixels or 150 by 150 pixels, of muted or plain colors, light or heavy textures, scenic views, soft or bold designs or various other patterns

It doesn't really matter as far as points are concerned, I was just stating that I answered correctly.
LVL 23

Expert Comment

ID: 34227305
Just to clarify, I don't mean to sound argumentative, I am sorry if I am coming across in that manner. What you have created is more of a tiled background. A seamless background is when you can't tell where one part of the image starts or stops (horizontally or vertically).

Author Closing Comment

ID: 34227506
You are correct, technically what I created is not a seamless background, because it was not possible to create a seamless background with that image, so your answer was correct. Apologies for not awarding initially, wasn't thinking about it from that perspective.
LVL 23

Expert Comment

ID: 34227548
I am glad you were able to find a suitable compromise. Good luck with the site.

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question