Solved

How to create seamless tile with attached image

Posted on 2010-11-27
9
1,012 Views
Last Modified: 2013-11-19
Hello,

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!
BG-Big.jpg
0
Comment
Question by:Spiderstave
[X]
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
9 Comments
 
LVL 23

Accepted Solution

by:
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.
0
 

Author Comment

by:Spiderstave
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34227159
Technically I did answer the question. It isn't possible to create a seamless background with the image.
0
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

Author Comment

by:Spiderstave
ID: 34227234
That's not true, I did create a seamless background (attached).
bg-tile.jpg
0
 
LVL 23

Expert Comment

by:jeremyjared74
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
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).
0
 

Author Closing Comment

by:Spiderstave
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.
0
 
LVL 23

Expert Comment

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

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
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…
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

617 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