Quick CSS question

DezUk

DezUk

DezUk

Associate
Joined
20 Sep 2003
Posts
2,384
Location
Scotland
I am working on a little design idea using a repeating diagonal background which is working fine. I have made a banner background which also uses the diagonal background but also has a slight gradient overlay applied and i want this to repeat 100% of the width. At the moment i just have a banner image of 850px (width of the main content) and have it set to repeat-x but as expected I am getting an obvious line break when it repeats.

Can anyone suggest how I could cut up the banner image to repeat without a flaw?

The site is here:
http://rdoyle.info/wedding/

CSS is here:
http://rdoyle.info/wedding/layout.css

And banner is here:
http://rdoyle.info/wedding/images/banner.png
 
Crop the image down to the first 40px - this should give you a seamless horizontal tile.
 
Thanks mate that fixed it :)

Any ideas on why it wont stretch 100% height wise?

in fact think I fixed it!
 
Last edited:
Couple other things, I am using Chrome to test my design and it looks fine yet when i test it in Firefox the colours are slightly different between the banner and the background image i use which results in a seam showing. My main content background is also not showing firefox.

It also looks fine in Safari

Any ideas why?

Update: i just checked my hex colors and made changes and now its looks fine in FF but chrome shows the colors wrongly now :(
 
Last edited:
I assume you managed to fix whatever was the problem because it looks fine to me in both Chrome and Firefox now? I noticed a difference in Firefox earlier.
 
Just to muddy the waters, here's what I'm seeing:
DezUk said:
Wel i have two versions up now one that works in chrome and safari yet doesnt work in firefox

http://rdoyle.info/wedding/v2
Click to expand...
FF: visible colour difference [doesn't work]
Ch: visible colour difference [doesn't work]

And one that works in firefox yet not chrome and safari

http://rdoyle.info/wedding/
Click to expand...
FF: no colour difference [works]
Ch: no colour difference [works]

Check that you're not embedding an ICC colour profile in the image when you're exporting it from Photoshop.

See also:

http://www.color.org/version4html.xalter

Are you using the latest versions of each browser?
 
Thanks for the feedback folks, appreciated!

I want to use the brigter colours of v2, think the issue there is with the banner background using slightlhy different colours. I will try fixing that when i get home tonight.
 
You must log in or register to reply here.
Back
Top Bottom