Spiderstave
asked on
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Technically I did answer the question. It isn't possible to create a seamless background with the image.
ASKER
That's not true, I did create a seamless background (attached).
bg-tile.jpg
bg-tile.jpg
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.
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.
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).
ASKER
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.
I am glad you were able to find a suitable compromise. Good luck with the site.
ASKER
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.