Background Image, Reward $25

[4CustomDesign]

I'm having a problem upload my background image to my website. I already changed/exported the background to gif or jpeg but somehow the background didnt strecth all the way. If it does, it streches in many rectangles instead of one rectangle. I hope this is making sense otherwise please let me know.

Anyone please help!!

I'm a little bit desperate right now. If anyone helps me to figure this out untill it works(It would help if you know dreamweaver i think), i will give you $25. (You gotta have a paypal account).

Thanks again.

Well, I got all the suggestions but i'm still not satisfied. You might think i'm a dummy well may be I'm. I just can't figure it out. It made me mad. Anyone can give me step by step how to make a gradient background with Xara Xtreme i will give you $40. I think this is pretty simple so it's not bad for $40. (GOTTA HAVE A PAYPAL ACCOUNT)

P.S First-Come First-Serve. I will decide the person who deserves the $40. Thanks

[Scotty]

When craing tiling background images containing gradient it is best to either create them using a larger width than the web page dimensions, for a gradient similar to the one poste create it 60 pixels wide and 900 pixels high then export. Fit gradients in the opposite direction create large width and narrow depth. (I think I got that right) The image you created is tiled like floor tiles that is what you get).
P.S. don't forget not all browsers show gradients the way you expect.
Jim

[Scotty]

Here is a JPG

[4CustomDesign]

When craing tiling background images containing gradient it is best to either create them using a larger width than the web page dimensions, for a gradient similar to the one poste create it 60 pixels wide and 900 pixels high then export. Fit gradients in the opposite direction create large width and narrow depth. (I think I got that right) The image you created is tiled like floor tiles that is what you get).
P.S. don't forget not all browsers show gradients the way you expect.
Jim

Thanks for a quick reply. I don't think I'm quite following you after the "fit gradients in the..."I got everything right i mean i made the dimensions not to big so it would not take long for uploading. But like you said when i put the file on dreamweaver it comes out like floor tiles (I like that description, i dont know how to describe it). For try and error I tried copying from other websites background they worked just fine but in my case when i made it myself it didnt work.

Well? Thanks again.

[gwpriester]

That was Jim's point. The file you use as your background places a copy on the screen to the size it was created, then it places another copy next to that and another next to that and another, etc.

So what Jim has suggested is to make a very tall but not very wide background image. You could make the image 20 pixels wide by 3000 pixels deep if you wanted. Deeper if necessary.

The image will tile across the screen as far to the right as the page can go. And it will go as deep as you make it and then repeat the tile again. That make sense?

There is a good way to see how your tile is going to look on your web page. Import the image into Xara. Open the Bitmap Gallery (F11) select the Image and then click the Background button. The page will be filled with your background image.

Gary

[gwpriester]

A Picture is Worth 999 Words.

Also, I noticed that your background square has a bit of white on the left side. So that space will repeat as well. Drag the tile over to the gray area off the page and you will see the white area.

Gary

[4CustomDesign]

Thanks for a quick reply. When you said the image to be 20 pixels wide by 3000 pixels deep, that was the size of the image right? I did it already but the background didnt stretch/cover the whole page what happened was it tiles the whole page which i didnt want it.

I dont know if this makes sense or no.

Thanks.

[Scotty]

Here is horizontal bar

[Logo Kid]

I always go 8,000 x (.... erm) 1 and export as 100% quality jpeg ... mostly comes out at about 4k .... a few points about doing tiled backgrounds :

1. Why do them any wider than 1 pixel? They're tiling any way ... keeps the file size down.

2. Always use the input boxes at the top to get them exact pixels ... and turn off the aspect ratio lock to do this (the little pad-luck buy the width and hiehgts) otherwise you get nasty anti-aliasing either side or at the top and bottom and you get streaked lines like on the example Gary did above). So the file you need to export should be 1 x 8000 not something like 1.3 x 8000.7.

3. Never use completely linear gradients always looks nasty ... use the gradient profile buttons and change it left a little or right a little ... make them look more nature and better IMHO.

4. Alway use 100% quality jpeg (true colour) ... you would think that they would take up more space ... they don't ... the way jpeg works is that it doesn't read the space after the fill .... or only marginally adds to the file size .... so you can make it as long as you want ... the maximum you can export at is 8000 pixels from xara any way .... if you are going to have a page with loads of text going further down the page - make the whole page a table and set it to the background of the table and use rows or alternatively be smart and use a Cascading Style Sheets and set the background of the page to just tile horizontially.

The 4k 1 x 8000 pixel method is quick and dirty method for me but I use it all the time and have a xara file that i use all the time with it already set up as a template and just copy across another background and play ... there's about 40 or 50 shapes I've already got in there i've used for backgrounds.

Any way I attach a file that you could use that is exactly what you want and another few more where the colours are not so black and white (it always pays to put in a very tiny amount of colour to the grey) and one with a not so linear profile).

[Daniel]

If you've seen a 1pix wide image repeating on a slow PC you'll know why not to use one - the screen refresh takes forever! 50-100px is a good width.

Rather than make your image 8000pix tall (what if the page is a long one like one of these forum threads, it could easily be longer than 8000pix - perhaps that's why the original poster is having re-tiling trouble) you can use HTML or CSS to stop the background from moving when you scroll down. Set a solid background colour which matches the end colour of the blend - so if your blend is black to white, set the solid background colour to white.

HTML: <body background="filename.jpg" bgproperties="fixed">
CSS: <style type="text/css">
<!--
body {
background-attachment: fixed;
background-image: url(filename.jpg);
background-repeat: repeat-x;
}
-->
</style>

Perhaps it is an illusion of horizontal boxing (as visible with a good monitor on Gary's example above) where there is some antialiasing on the vertical edges of the tiling bitmap - see the bottom (darker) areas of Gary's example above - you can see feint grey vertical lines in the black areas.

To combat that, rather than exporting your gradient on a white background, copy your gradient in Xtreme so that it is wider (but the same height) as the one you want to use, and then export. Say you have a 2000pix high x 100pix wide gradient - copy it and make it 2000x150pix and send it behind your 100pix wide version. Export the 100pix wide version and the antialiasing won't be onto a white background so you won't have the problem that Gary demonstrates above.