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

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
  • 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.
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.


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 About.com

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

808 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