Question on graphic sizes for...

User 38401 Photo


Senior Advisor
10,951 posts

Hiya,

As many of you know, and even helped me immensely, I've put my site up with the CSS setup for repeating the tiny slices of background image in the content area of my shop. I thank everyone that helped me, and I'm reading a book currently that should also help me understand how this all works better. In the meantime I have a question on sizes.

Does the size of the graphic matter when putting the parts together to create a whole? In other words, the top, middle, bottom/footer, etc. when you're trying to put these together to match up edge to edge is there a specific way to be sure that they match up or is it all trial and error?

The reason I ask is because I'm wanting to create some special things for the Holidays and here's my thinking on it:

My current middle graphic has a height of 8 px and I'd like to take a graphic with some candycane striping and have it spiral down the sides of this area with the top and bottom of the candycane on the respective edges of the Top and Bottom graphics so that they line up. I don't think I can even come close to this using an 8 px graphic in the middle so I'm thinking to increase the middle size to like 20 or 30 px so I can fit enough in to get the repeating factor of a spiral.

Another scenario would be to just find a small graphic of a candycane or something similar and fit it into a slice of that middle background piece, of course either way I'll need a larger area to do this. So I guess I need to know how to calculate this or if there's a way or if it can even be done this way? I know, dumb question I should just do it but I'm afraid to break it! LOL
Thanks for any assistance you can give guys :)
User 122279 Photo


Senior Advisor
14,455 posts
Online Now

There are no limits to the size background graphics, but of course the smaller the pic, the faster it will load.

You can set a background picture to repeat-x, repeate-y or just repeat, which will be both ways.

If you have the ready made graphic files for what you want, there should be no problem, but if you have to slice/dice a picture to make up the bits, it could be a problem getting them to match exactly. You would have to experiment.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

so I could change the height of my 960px width x 8px height border graphic to anything I want and if it's set to repeat it will line up ok with the top and bottom edges? I am sure I can experiment on the addition of the holiday graphics, but will it always meet up exactly at the edges of the top and bottom like it does now? Or is there some specific type of number setting I need to be working with? In other words, if I have an 8px height now, should I stay in multiples of 8? or doesn't it matter at all as long as it's repeated on the y axis?
User 122279 Photo


Senior Advisor
14,455 posts
Online Now

You are free to decide completely on the px each way, it doesn't have to be multiples of anything specific. What is important for the looks of your pattern is, that you slice it so that you have one instance of the pattern as a file, either in the width or in the height or both. When the pattern starts repeating itelf, then that ought to be on the next slice.

If your pattern is straight down or across it should work like a dream, but if you have something slanting, that's where the experimenting comes in. I could probably be more of a help if I could see the graphics in question, but you probably don't want to reveal it here and have it up for grabs for everyone? ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

hehe thanks so much Inger, and no worries on the graphics, I don't have them all picked out yet even, this is just something I'm dreaming up in my head yet and happened to think about how it would go on the page. Most appreciated as usual for your assistance. I can now rest assured it should work if I do it right and when I have it set to go I'll give a hollar so you can see it :)
User 38401 Photo


Senior Advisor
10,951 posts

Ok I got the basics done, hopefully it's not too over the top as I don't want to take away from the main idea that it's a shop not a xmas town lol. It's just the Index page, the rest aren't done yet, wanting to make sure this one looks good first. Let me know what you think and if it's too much or not :)

http://accessoriesoftheworld.com/indexxmastester.html
User 1948478 Photo


Senior Advisor
1,850 posts

Looks great Jo Ann! I think the tone of the background colors and -patterns is good, which is crucial in order to maintain the 'dignity' of the shop - despite the season! Thus, not 'over the top', I think.
(And this from a guy who is not really into Christmassy stuff...!)
Just remember to revert back to 'normal' after Christmas! ;)
User 38401 Photo


Senior Advisor
10,951 posts

Thanks Per,

Ya it's so easy to do when you use CSS because all my graphics stuff is inside that file so all I need to do is swap css file and done lol. The shop is almost set too with a separate xmas theme so it's just a theme swap. I love CSS and the more I learn the more I love it. Creating an entire them that's CSS based means you can make them for all your holidays and all you need to do is swap the CSS for externals and theme's for shops, pretty slick!
User 122279 Photo


Senior Advisor
14,455 posts
Online Now

The christmassy shop looks good, Jo-Ann! I also like the frame around each item. I think you ought to stick with that also after Chrismas.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

Thanks Inger, the frame will be staying, I'm still getting many of them framed yet, but that will be part of the normal theme. I thought about changing it for the holidays but that's just way too much work lol. Still getting it all finalized but it's getting there :)

I am having trouble with the top and bottom area because the text of the page like Shop Home or Categories or whatever is covered by the holiday graphic and no matter how I try to move that text it can't go down as the slice of graphic at the top just ain't big enough I guess. I'll have to try to adjust the size but that's for another day, I may just say heck with it too since it's just for a month or so out of the year that I will use this theme lol. Same with the footer, I can't get that Copyright info off the edge of the border there, there's nowhere in the program to access that line of text at all that I can see :/

Anyways it's getting there, fun stuff!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.