locked
Slice from ED for EW RRS feed

  • Question

  • Hey Everyone,

    Apologies in advance this is a question to do with both E-Design & E-Web

    I want to create a gradient in Design, and I want use it as my <body> Background in an EW site.

    My question is what is the best way to do this?
    Do I create a box in design larger than the full size of the browswer
    or
    Can I create a slice of this gradient and repeat it in EW, if so what height would I need to apply
    or if anyone has an alternative i'd appreciate it.

    Thanks in advace

    Cheers,
    Paul
    Tuesday, September 29, 2009 8:01 PM

Answers

  • If you use the first method, how do you know what size box you need? And how do you deal with the fact that your backgeound image is humongous and will take forever to load?

    You don't need an image the size of the browser. What size is that, anyway? On my 1280 x 1024 CRT it could be that size. On my 1600 x 1200 ThinkPad it could be that size. On the GOK-what-resolution 32" LCD monitors they have these days (a la Chris Pirillo's), well, you get the idea.

    No, all you need to do is create the gradient so that it transitions from the top color to the bottom color wherever you wish it to do so with respect to the main content area, usually near, but some way down from, the header's lower bound. Take a four or five pixel wide vertical slice of the gradient. This becomes your background-image. Then you set it as the body background image using the following CSS:

    body {
       background-image:myGradient.jpg;
       background-position:top left;
       background-repeat:repeat-x;
       background-color:blue  //NOTE: Set this to whatever the bottom color of your gradient is. That way no matter how 
                                           far down the visitor scrolls the gradient appears continuous.
    }

    HOW IT WORKS: myGradient.jpg is a four or five pixel wide version of your gradient. Positioning it top, left is obvious; it ensures that the gradient begins in the upper-left corner. Repeat-x tells the rendering engine to repeat the gradient in the x-plane (i.e. horizontally) forever, so no matter how wide the browser becomes it will continue to the right. Setting the background color to the lower terminal color of the gradient ensures that no seam is discernible between the bottom of the gradient and the rest of the page, no matter how far down it is scrolled.

    It is a simple matter, but it does involve a combination of graphics creation and the knowledgeable application of CSS.

    cheers,
    scott
    Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
    • Marked as answer by paullyie Wednesday, September 30, 2009 8:41 AM
    Wednesday, September 30, 2009 5:12 AM

All replies

  • Hi paullyie,

    I just use the first method you mentioned, and it works well. I think it's a easy way to do that.

    Wednesday, September 30, 2009 1:37 AM
  • If you use the first method, how do you know what size box you need? And how do you deal with the fact that your backgeound image is humongous and will take forever to load?

    You don't need an image the size of the browser. What size is that, anyway? On my 1280 x 1024 CRT it could be that size. On my 1600 x 1200 ThinkPad it could be that size. On the GOK-what-resolution 32" LCD monitors they have these days (a la Chris Pirillo's), well, you get the idea.

    No, all you need to do is create the gradient so that it transitions from the top color to the bottom color wherever you wish it to do so with respect to the main content area, usually near, but some way down from, the header's lower bound. Take a four or five pixel wide vertical slice of the gradient. This becomes your background-image. Then you set it as the body background image using the following CSS:

    body {
       background-image:myGradient.jpg;
       background-position:top left;
       background-repeat:repeat-x;
       background-color:blue  //NOTE: Set this to whatever the bottom color of your gradient is. That way no matter how 
                                           far down the visitor scrolls the gradient appears continuous.
    }

    HOW IT WORKS: myGradient.jpg is a four or five pixel wide version of your gradient. Positioning it top, left is obvious; it ensures that the gradient begins in the upper-left corner. Repeat-x tells the rendering engine to repeat the gradient in the x-plane (i.e. horizontally) forever, so no matter how wide the browser becomes it will continue to the right. Setting the background color to the lower terminal color of the gradient ensures that no seam is discernible between the bottom of the gradient and the rest of the page, no matter how far down it is scrolled.

    It is a simple matter, but it does involve a combination of graphics creation and the knowledgeable application of CSS.

    cheers,
    scott
    Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
    • Marked as answer by paullyie Wednesday, September 30, 2009 8:41 AM
    Wednesday, September 30, 2009 5:12 AM
  • Excellent Scott,

    Thanks for that, good point about the monitor screen size, (even with ould Chris on his Dual Dell 32"..lol)
    I taught the height was going to be messy when creating the gradient, becuase it would leave you with a solid background colour towards the end of your page. 
    But a "fixed" background solves that

    Thanks again Scott.

    Cheers,
    Paul

    Wednesday, September 30, 2009 8:50 AM