FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Background Generation Query





Scorpio
I am not very proficient with CSS.
I would like to know about something here, though.
I ve seen images used as headers' backgrounds of sizes like 1x100px and 1x120px etc.
It is quite obvious that the image is repeated horizontally to get the complete header background.
What I want to know is how these images of such sizes are created by the users?
I ll be glad if somebody clears this up for me.

Thanks Very Happy

Clarify with me if you dont get my meaning Razz
a_dubDesign
they get sliced that small in whatever image program is being used by the designer. The header gets drawn full size, just sliced and saved really small.
Scorpio
a_dubDesign wrote:
they get sliced that small in whatever image program is being used by the designer. The header gets drawn full size, just sliced and saved really small.


Is there a tutorial or something that can be used by me to do this "slicing" process?
Smile
Dragate
Sure...

I'm guessing you don't know much about image editors, so i'll go through it step by step.

First you need an image editor, i'll show you with photoshop~
you can also use the GIMP (absolutely free, just google it)

Let's say this is your starting image:


Open up photoshop and click this tool (single marguee selection tool, i'll show you horizontal) :


Then you'll have a 1 pixel by w.e the picture was selection:


Then just copy that selection, or cut it. I advise you copy so you don't destroy your original image.

Edit -> copy (CTRL + C) or copy merged (if you have mutliple layers CTRL + SHIFT + C)

Now open up a new image, for photoshop, the size will be set for your image already. Measure out the copy size if you don't know it and your image editor doesn't automatically set the new image in that size.

File -> New (CTRL + N) then click okay (for photoshop)

Now paste the copied selection in:

Edit -> Paste (CTRL + V)

Now save it and use it in CSS~

Code:
<head>
<style type="text/css">
body
{
background-image:
url('http://PICTURELOCATION.jpg');
background-repeat: repeat-x
}
</style>
</head>


Hope that helped!

GOOD LUCK~
Scorpio
Thank you very much. That worked well.
One more query. If we already have a 1x100 px image or so, how do we edit it in order to change the colors etc. It is a png image.
Since the width is very less it is difficult to comprehend color changes. Is there any alternative for this?
Thanks
Dragate
If you already have the picture and an image editor, just zoom up and do sutff by hand to draw in new stuff.

If you want to JUST change colour...

Try to go Select -> All

Then CTRL + U click the check box for colorize, play around with the hue saturation and lightness and you'll get different colours.

It's jus editing the hue and saturation.

Have fun! I'm glad you liked it Very Happy thnx
Scorpio
Thanks again dragate..

You ve been a great help.. Very Happy
GB
Also, you can have thicker lines than just 1x100 px. This may make it easier to edit the colors, etc.
Scorpio
I have another doubt coming up:

Very Happy

For example I have this 1x100px background thingy.
I want the contents of it[I am referring to the color variation within it] on a 1x26px smaller image.
Anyway I can do it?

Thanks
Related topics
script backup database
The Unofficial Jokes Thread
shop mod for phpbb?
Using a pic as the main background of your page?
SQL Basics
background tiles for sites
I need a background for my site...
Cloudy Background
very simple PHP code to get search query string
background music
Introduction Generation 2k
Frankfurt Motor Show, 2005
Basic Tags - Add a background image
Basic Tags - Add a background image
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.