Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1026
  • Last Modified:

How to create seamless tile with attached image

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
Spiderstave
Asked:
Spiderstave
  • 5
  • 3
1 Solution
 
jeremyjared74Commented:
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
 
SpiderstaveAuthor Commented:
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
 
jeremyjared74Commented:
Technically I did answer the question. It isn't possible to create a seamless background with the image.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
SpiderstaveAuthor Commented:
That's not true, I did create a seamless background (attached).
bg-tile.jpg
0
 
jeremyjared74Commented:
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
 
jeremyjared74Commented:
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
 
SpiderstaveAuthor Commented:
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
 
jeremyjared74Commented:
I am glad you were able to find a suitable compromise. Good luck with the site.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now