Edited by mrsleep, 04 February 2006 - 10:49 AM.
Getting rid of white space around my gradient?
Started by
mrsleep
, Feb 04 2006 10:48 AM
#1
Posted 04 February 2006 - 10:48 AM
mrsleep
-
- Member
-
- 19 posts
Member
#2
Posted 05 February 2006 - 07:30 PM
The Architect
-
- Member
-
- 58 posts
Member
Just for clarification, does the white border exist on all four sides of your graphic?
If so, does the border appear to be a part of the graphic? (that is, when you preview it, do you see the border?)
Finally, is there a link to a site where we can view what you see?
I don't mean to make things complicated, but I'd rather have a bit more info before I throw out suggestions!
If so, does the border appear to be a part of the graphic? (that is, when you preview it, do you see the border?)
Finally, is there a link to a site where we can view what you see?
I don't mean to make things complicated, but I'd rather have a bit more info before I throw out suggestions!
#3
Posted 05 February 2006 - 10:53 PM
KiLleR Civilian
-
- Member
-
- 18 posts
Member
Your description of the peoplem is indeed unclear.
so you are trying to set a repeat background? and you have borders from photoshop? In that case, you cant do anythinng from html. You have to get rid of the border from photoshop/illustrator or if they dont work, get a better image editor.
I assume u know how to set up repeat backgrounds. Best way is to use css. Put background-image: url(your image file); and then put "background-repeat" to "repeat-y"
so you are trying to set a repeat background? and you have borders from photoshop? In that case, you cant do anythinng from html. You have to get rid of the border from photoshop/illustrator or if they dont work, get a better image editor.
I assume u know how to set up repeat backgrounds. Best way is to use css. Put background-image: url(your image file); and then put "background-repeat" to "repeat-y"
#4
Posted 06 February 2006 - 10:03 AM
mrsleep
- Topic Starter
-
- Member
-
- 19 posts
Member
Here's a screen shot of both the gradient I'm trying to use and the problem I'm having with it:
In the bottom image I'm trying to achieve a smooth constant gradient across the top of the page. But there's that ugly white border around each instance of the gradient. I can't seem to figure out how to get rid of it in Illustrator. Thanks again for any help you can offer!
In the bottom image I'm trying to achieve a smooth constant gradient across the top of the page. But there's that ugly white border around each instance of the gradient. I can't seem to figure out how to get rid of it in Illustrator. Thanks again for any help you can offer!
#5
Posted 06 February 2006 - 11:34 AM
The Architect
-
- Member
-
- 58 posts
Member
Thanks for the screenshots, mrsleep - any chance we can have a look at your code?
I initially thought that the problem lay with your graphic - thinking that perhaps Photoshop might have added a border that is hard to detect when previewed (you'd need to zoom in bit to see it) - my suggestion would have been to shrink the graphic on all sides by a pixel or two to eliminate it - you'd of course then need to adjust your code to reflect the new image size.
However, it's odd that the repeating border is not uniformly the same color in your screenshot (it's four gray lines followed by 18 white lines - which I assume is the same on your PC ?) A look at your code might clear up the mystery - or we might be able to suggest an alternate way of doing what you want.
Also, what are the dimensions of your graphic?
I initially thought that the problem lay with your graphic - thinking that perhaps Photoshop might have added a border that is hard to detect when previewed (you'd need to zoom in bit to see it) - my suggestion would have been to shrink the graphic on all sides by a pixel or two to eliminate it - you'd of course then need to adjust your code to reflect the new image size.
However, it's odd that the repeating border is not uniformly the same color in your screenshot (it's four gray lines followed by 18 white lines - which I assume is the same on your PC ?) A look at your code might clear up the mystery - or we might be able to suggest an alternate way of doing what you want.
Also, what are the dimensions of your graphic?
#6
Posted 06 February 2006 - 01:43 PM
ScHwErV
-
- Retired Staff
-
- 21,285 posts
Member 5k
If you created the image large in photoshop, then shrunk it, itll have that white border.
ScHwErV
ScHwErV
#7
Posted 06 February 2006 - 01:48 PM
mrsleep
- Topic Starter
-
- Member
-
- 19 posts
Member
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style>
body {
font-family: "Times New Roman", Times, serif; margin: 20px;
color: #000000;
font-size: 10px;
font-weight: 100;
background-repeat: repeat-x;
background-image: url(2121.jpg);
}
</style>
</head>
<body>
</body>
</html>
There's the code for the above screen shot of the page. The dimensions of the gradient graphic are:
22 x 255 Pixels
I'm confused when you said "However, it's odd that the repeating border is not uniformly the same color in your screenshot (it's four gray lines followed by 18 white lines - which I assume is the same on your PC ?) A look at your code might clear up the mystery - or we might be able to suggest an alternate way of doing what you want.", can you clarify a bit? Are you saying when you preview the screenshots the gradient is black and white? Thanks!
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style>
body {
font-family: "Times New Roman", Times, serif; margin: 20px;
color: #000000;
font-size: 10px;
font-weight: 100;
background-repeat: repeat-x;
background-image: url(2121.jpg);
}
</style>
</head>
<body>
</body>
</html>
There's the code for the above screen shot of the page. The dimensions of the gradient graphic are:
22 x 255 Pixels
I'm confused when you said "However, it's odd that the repeating border is not uniformly the same color in your screenshot (it's four gray lines followed by 18 white lines - which I assume is the same on your PC ?) A look at your code might clear up the mystery - or we might be able to suggest an alternate way of doing what you want.", can you clarify a bit? Are you saying when you preview the screenshots the gradient is black and white? Thanks!
Edited by mrsleep, 06 February 2006 - 01:50 PM.
#8
Posted 06 February 2006 - 04:16 PM
The Architect
-
- Member
-
- 58 posts
Member
Your code looks fine (not to doubt you, but it always pays to be sure! 
)
Sorry for the confusion caused by my last post - let's disregard that for now, I'll come back to it if my suggestion (following) doesn't work!
It looks like the problem lies with the graphic itself (which was something I initially suspected), based on the fact that your code looks good AND on ScHwErV's post: "If you created the image large in photoshop, then shrunk it, itll have that white border." (did you??!!)
Your image seems to have a white border around it already, which of course will show up when tiling across the top of the page. Try contracting the graphic on all sides by one or two pixels, which will have the effect of removing the border around the graphic - resave it, then test the result.
Fingers crossed....
)Sorry for the confusion caused by my last post - let's disregard that for now, I'll come back to it if my suggestion (following) doesn't work!
It looks like the problem lies with the graphic itself (which was something I initially suspected), based on the fact that your code looks good AND on ScHwErV's post: "If you created the image large in photoshop, then shrunk it, itll have that white border." (did you??!!)
Your image seems to have a white border around it already, which of course will show up when tiling across the top of the page. Try contracting the graphic on all sides by one or two pixels, which will have the effect of removing the border around the graphic - resave it, then test the result.
Fingers crossed....
#9
Posted 07 February 2006 - 12:58 PM
mrsleep
- Topic Starter
-
- Member
-
- 19 posts
Member
There it is I got it. Turns out there was a white border made in Illustrator this whole time. Boy do I feel stupid. I could've sworn I zoomed in before to look for a border but there wasn't one until I opened the jpeg in Illustrator. So, I took the jpeg and cropped it in IRfanview and resaved it and that's the result, looks a LOT smoother. Thanks for everyone's help, greatly appreciated, it all helped!
#10
Posted 07 February 2006 - 01:00 PM
ScHwErV
-
- Retired Staff
-
- 21,285 posts
Member 5k
When you do any border like that, its best if you do them just 1px wide. That way the image is at its absolute smallest and it will load faster.
Glad you got it sorted out.
ScHwErV
Glad you got it sorted out.
ScHwErV
#11
Posted 07 February 2006 - 04:12 PM
The Architect
-
- Member
-
- 58 posts
Member
Excellent!
Maybe you'll show us the site when you're finished?
Maybe you'll show us the site when you're finished?
#12
Posted 07 February 2006 - 10:14 PM
ricangeek
-
- Member
-
- 21 posts
Member
I use grsites.com to take care of all my background needs.
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
As Featured On:
Sign In
Create Account
