Background with gradient

  • mister harbies
  • Novice
  • Novice
  • mister harbies
  • Posts: 25
  • Loc: Auckland, New Zealand

Post 3+ Months Ago

How do you make a brackground with a gradient? I can not make the background follow width=100% and height=100%

If you look at http://xtramsn.co.nz/home/ you can see a nice blue background that fades though the full page without tiling.

How is this possible?


Mister Harbies
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

If your after something similar you will to do what they have done - make a gradient graphic in your image editor (photoshop or similar) then make it 1px wide and as long as you want. The person who has done this website has made theirs 1005px long. Which is okay as long as your page doesnt go longer than that or it will tile and look silly. In which case you can make it longer.

You just make that image your background and it will tile seamlessly across.
  • mister harbies
  • Novice
  • Novice
  • mister harbies
  • Posts: 25
  • Loc: Auckland, New Zealand

Post 3+ Months Ago

I thought that it was stretched to fit the page.

I think it will do the same as what xtra has done but will make sure it does not look silly when tiled by making the top and bottom the same colour so it repeats the gradient continuously regardless of how long the page is.

Hope this would look good.


Mister Harbies
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Nope, its just a 1px wide graphic that repeats itself seamlessly across the page. Just make the image quite long and you wont have any problems with it repeating should the page be too long.

You could make a larger image and have it a static background - you need to make sure its rather wide though as some people use ridiculously huge resolutions on their computers :D

I've made some before in Illustrator and saved for web as a .gif and the file size has been tiny for the size of the image and it also keeps its pixels clear and sharp.
  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

musik wrote:
...make it 1px wide and as long as you want. The person who has done this website has made theirs 1005px long. Which is okay as long as your page doesnt go longer than that or it will tile and look silly. In which case you can make it longer.

You just make that image your background and it will tile seamlessly across.


Will this reduce bandwidth (tiling/repeating a 1px image) verses using a larger image that fills the background without repeating?
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Using a 1 pixel-high image (3000 pixels wide) is not necessarily a good idea, you may wish to use one that is say, 15px high. Because of compression, the file size will be practically the same, if the 15px image has each row the same. You should do this because some browsers are slow in their algorithm which repeats the background image down the page, and using a 15px image speeds it up a bit. I noticed that IE has a minor problem with this, if I load a page while say, uncompressing two RK files simultaneously while compiling java. Other, more historic browsers have more trouble with repeating thin images, especially on slower computers (mine is a zippy 500 MHz Celeron). And some people still use such things.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Sam Hughes wrote:
(mine is a zippy 500 MHz Celeron). And some people still use such things.


*raisesHand* 550mhz pIII laptop here.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Sam Hughes wrote:
Using a 1 pixel-high image (3000 pixels wide) is not necessarily a good idea, you may wish to use one that is say, 15px high. Because of compression, the file size will be practically the same, if the 15px image has each row the same. You should do this because some browsers are slow in their algorithm which repeats the background image down the page, and using a 15px image speeds it up a bit. I noticed that IE has a minor problem with this, if I load a page while say, uncompressing two RK files simultaneously while compiling java. Other, more historic browsers have more trouble with repeating thin images, especially on slower computers (mine is a zippy 500 MHz Celeron). And some people still use such things.



Aye, but the point here is to make a gradiant background :) - in which case would need to be longer than 15px or it will tile and look silly. The total image size of the one on the website mister harbies is enquiring about is only 1.7kb its not a huge deal to use one as long as its long enough to cover the screen in length.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Maybe you don't understand. 15 pixels high, 3000 wide (or 2000...something). Then it repeats down the page. And voila, a gradient.

Or, in that example given by the inquirer, you have it be a certain height (not particularly large), 15ish pixels wide and have it set with repeat-x, with a good background color up top.

Code: [ Select ]
body {
background-color: #CCF; /* light blue */
background-image: url(vertical_gradient.png); /* the gradient image */
background-attachment: scroll /* this is default, just mentioning anyway */
background-position: bottom left; /* puts the _image_ on the bottom */
background-repeat: repeat-x;
/* repeats the image _horizontally_
* but not vertically. Where the image exists not, the color is shown.
* (the color should be the same as the top of the gradient image)
*/
  1. body {
  2. background-color: #CCF; /* light blue */
  3. background-image: url(vertical_gradient.png); /* the gradient image */
  4. background-attachment: scroll /* this is default, just mentioning anyway */
  5. background-position: bottom left; /* puts the _image_ on the bottom */
  6. background-repeat: repeat-x;
  7. /* repeats the image _horizontally_
  8. * but not vertically. Where the image exists not, the color is shown.
  9. * (the color should be the same as the top of the gradient image)
  10. */
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Did you look at the example URL posted?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

If you never noticed this on http://www.microsoft.com :

Code: [ Select ]
<td id="regionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')">


Certainly NOT cross-browser, but it scales with the window. I think it's a good idea to eventually include something similar to this in the W3C standards.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Aye, however for something which is workable in all browsers (except for those viewing on something the size of a movie screen) and for this example given byt he original poster, a long thin graphic image is what has been used to get the look they are wanting :D
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Quote:
Did you look at the example URL posted?


Well, I did before you asked me that, anyway, and edited my post with a solution for what they did. The example URL given by the OP does not have the gradient stretching to fit; it just sits at the bottom, at least in Moz and IE 6.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

:shock: :lol:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Sam Hughes wrote:
The example URL given by the OP does not have the gradient stretching to fit; it just sits at the bottom, at least in Moz and IE 6.


Wasn't sure if you were talking about my post.

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head></head>

<body>
<table height="50%" width="100%">
<tr>
    <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')"></td></tr></table></body></html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head></head>
  4. <body>
  5. <table height="50%" width="100%">
  6. <tr>
  7.     <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')"></td></tr></table></body></html>


http://www.chriscarney.com/cleanMe/back ... ter001.gif

http://www.chriscarney.com/cleanMe/back ... ter002.gif

http://www.chriscarney.com/cleanMe/back ... ter003.gif
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Everyone does realise they want the gradiant to run DOWN the page, yes?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

ok, so gradientType='0'
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

:lol:

but it doesnt work in all browsers :S
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

:D Which I made VERY clear in my first post. :D
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

yes, I am just repeating this information lol


ahh too funny... :D

Well anyhoo he has a lot of great options to try now! :D
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

:handsup: I got nut'n but love for musik and ozzu!
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

:lol: ahh bless ya lil cotton socks luvvy!

So yeah background and stuff and that... well I think they have the idea on it now ;)

Im zipping my lips now :P
  • mister harbies
  • Novice
  • Novice
  • mister harbies
  • Posts: 25
  • Loc: Auckland, New Zealand

Post 3+ Months Ago

Hey guys,

Thanks for the information supplied in the forum. However I feel that cross-browser compatibility is important. Without the gradient, the webiste will not look how I intended to.

Have decided to stick with the original gradient at 1px wide and 3000 down. Don't want the gradient to change too much on the page.

Thanks again,


Mister Harbies

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 13 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.