Solved

How to create seamless tile with attached image

Posted on 2010-11-27
9
1,006 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
  • 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
 

Author Comment

by:Spiderstave
ID: 34227234
That's not true, I did create a seamless background (attached).
bg-tile.jpg
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now