Need a new web host or having a problem with a script? Tips and advice on the best way to design, build and maintain your most valuable asset - your website!

Gradiant Page Margins

nates450r
Posts: 425
Joined: 03 Apr 07
Trust:

Gradiant Page Margins

hi guys,

as an effort to improve my web design skills i like trying new things, i personally like the look of a gradiant background/ page margins. IMO it adds style to the overall look of the website.

Anyway im using xsitepro2-- on my own, im trying to duplicate a xsitepro templete (to teach my self) anyway i got 98% of it figured out.. the one diffrence between the templete and my copy is the gradiant page margins

keep in mind both the xsitepro templete and mine have the same page content

the templetes page margins goes from light to dark so does mine however at the bottom of mine the gradient starts over again (repeats) on the original templete it stays a solid dark color.

EXAMPLE- original templete gradiant white to black my templete gradiant white to black then white again (repeat)

i cant figure this out becouse in my page layout everything is the same as the xsitepro templete. i just want the gradiant to stay dark not repeat.

any ideas?? thanks...Nate
  • 0
nates450r
Posts: 425
Joined: 03 Apr 07
Trust:
nates450r wrote:hi guys,

as an effort to improve my web design skills i like trying new things, i personally like the look of a gradiant background/ page margins. IMO it adds style to the overall look of the website.

Anyway im using xsitepro2-- on my own, im trying to duplicate a xsitepro templete (to teach my self) anyway i got 98% of it figured out.. the one diffrence between the templete and my copy is the gradiant page margins

keep in mind both the xsitepro templete and mine have the same page content

the templetes page margins goes from light to dark so does mine however at the bottom of mine the gradient starts over again (repeats) on the original templete it stays a solid dark color.

EXAMPLE- original templete gradiant white to black my templete gradiant white to black then white again (repeat)

i cant figure this out becouse in my page layout everything is the same as the xsitepro templete. i just want the gradiant to stay dark not repeat.

any ideas?? thanks...Nate


i have tried this with patterend backgrounds as well --and what happens is if my page content exceeds the pixel size of the pattern it repeats (looks tacky IMO) so next question is what do i need to do to the background so that it looks all the same?? im thinking about cutting,pasting,cropping (in PSP) the background to fix this-but is the right way? is that how it should be done?
  • 0
essexboyracer
Posts: 130
Joined: 02 May 11
Trust:
Without a link, you probably want the following:

Code: Select all
body {
    background: url("/path/to/image.png") repeat-x scroll 0 0 #92A4A6;
    height: 100%;
    margin: 0;
}


where image.png is 1px wide by however deep your gradient is and #92A4A6 is whatever colour your gradient stops at
  • 0
nates450r
Posts: 425
Joined: 03 Apr 07
Trust:
essexboyracer wrote:Without a link, you probably want the following:

Code: Select all
body {
    background: url("/path/to/image.png") repeat-x scroll 0 0 #92A4A6;
    height: 100%;
    margin: 0;
}


where image.png is 1px wide by however deep your gradient is and #92A4A6 is whatever colour your gradient stops at


thanks for the reply can you explain to me what this will do?
  • 0
essexboyracer
Posts: 130
Joined: 02 May 11
Trust:
It will repeat, on the x-axis, a 1px wide image which will create the illusion of a gradient. Have you tried it? Google it if you are unsure, try http://www.tizag.com/cssT/background.php
  • 0

This topic was started on Jul 10, 2011 and has been closed due to inactivity. If you want to discuss this topic further, please create a new forum topic.