Im trying to mimc the effect that Chris went through in his latest screencast. The problem im having is that i have a gradient background so that when i try and use the main-content background image as a repeat im getting a nasty effect. So instead i tried just using the background as the complete section that i intend on having the main content area, but still getting a nasty effect.
What i really want is to be able to take a small section of the background image for the main content area and then repeat that in y so that no matter how much text is within the are the background will just repeat but respecting the gradient background. I also tried a png but got bad tiling effect.
Anyways enough rambling here is the link to the test page:
http://www.encorenails.com/encore
the style.css is http://www.encorenails.com/encore/style.css
I see you have a vertical gradient which is going to make the vertically repeating graphic for the main content area more complicated. One solution might be to use an alpha-transparent PNG for the main content area background image which can lay that drop shadow down over the page background and not interfere that way. Of course you'll have the usual IE6 problem (it doesn't display alpha transparency without a proprietary "filter"), but you can either just say screw IE 6 or use the "hack".
Nice one Chris, ill try the png method for this. I should still be able to repeat the png without any trouble right? and then switch back to a jpg to close off the content are?
Just done what you suggested about using a png for the repeating image, but again the tiling is very weird, instead of being a seamless image its tiling and looks nasty
If I understand your problem correctly, you want a gradient background that always stretches to fill the height of the page, right? You can't repeat-y because the gradient will then tile, but if you stretch the image too much or too little then it won't fit perfectly.
So what you can do instead is fake it. I had to do this once and IIRC this was the technique I used. Make a <div> that fills the entire page:
Now the image will always stretch to fit the whole <div>, which in turn will always stretch to fit the whole window. All you have to do now is give the other elements on the page a higher z-index so the "background" image doesn't cover them up.
Note that I just wrote this from memory and didn't test it, so it may or may not work perfectly, but that's the theory at least :lol:
I managed to tweek a few areas. I added a margin: -1px; to the main-content area to line it up with the header and footer links.
The issue im having now is that i can not get the nav-on image to work. You know, if you've seen it yet, Chris's new screencast where he shows how he made the links using sprites, exactly what he has on this site.
Well i can not get my 'on' image to show i only get the 'off' and 'rollover' images to be working where as when the link is clicked i would like it to turn to the 'on' image.
Hope this all made sense, anyways here is the link to the site:
1. I believe that pngs are the best way to accomplish this and no, you don't need to worry about IE 6 users if you use the png fix, which is very simple.
2. Maybe some ancient browser? I wouldn't worry about it.
When you say "on when it's clicked" do you mean only for the brief moment when it's clicked or do you want it to stay that way for the duration of the time spent on the page?
Im trying to mimc the effect that Chris went through in his latest screencast. The problem im having is that i have a gradient background so that when i try and use the main-content background image as a repeat im getting a nasty effect. So instead i tried just using the background as the complete section that i intend on having the main content area, but still getting a nasty effect.
What i really want is to be able to take a small section of the background image for the main content area and then repeat that in y so that no matter how much text is within the are the background will just repeat but respecting the gradient background. I also tried a png but got bad tiling effect.
Anyways enough rambling here is the link to the test page:
http://www.encorenails.com/encore
the style.css is http://www.encorenails.com/encore/style.css
Any help at all will be wicked
Thanks
Benn
please visit the below site for an example:
http://www.encorenails.com/encore/
So what you can do instead is fake it. I had to do this once and IIRC this was the technique I used. Make a <div> that fills the entire page:
div#background {position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
Then, instead of setting a background image, put the image inside that <div> and set both its dimensions to 100%:
Now the image will always stretch to fit the whole <div>, which in turn will always stretch to fit the whole window. All you have to do now is give the other elements on the page a higher z-index so the "background" image doesn't cover them up.
Note that I just wrote this from memory and didn't test it, so it may or may not work perfectly, but that's the theory at least :lol:
I managed to tweek a few areas. I added a margin: -1px; to the main-content area to line it up with the header and footer links.
The issue im having now is that i can not get the nav-on image to work. You know, if you've seen it yet, Chris's new screencast where he shows how he made the links using sprites, exactly what he has on this site.
Well i can not get my 'on' image to show i only get the 'off' and 'rollover' images to be working where as when the link is clicked i would like it to turn to the 'on' image.
Hope this all made sense, anyways here is the link to the site:
http://www.encorenails.com
Thanks
Benn
The graphics designer placed the drop shadow over the background image and the client wants to keep changing out the background at various times...
So I had thought about trying to use the .png solution for the drop shadow... and the client said to not worry about users that are still using IE6...
My question is - :
1. Is that still the best way to accomplish this given the facts mentioned above...
2. Is there any other browser that might have a problem doing it this way?
Thanks so much!
Tim
2. Maybe some ancient browser? I wouldn't worry about it.
I'm getting a 403 forbidden for your site.
When you say "on when it's clicked" do you mean only for the brief moment when it's clicked or do you want it to stay that way for the duration of the time spent on the page?