Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Getting rid of white space around my gradient?


  • Please log in to reply

#1
mrsleep

mrsleep

    Member

  • Member
  • PipPip
  • 19 posts
I'm currently trying to design a website and I've been fooling around with different backgrounds off and on trying to find one I like. My initial background I wanted was something like a light blue grid against a white background, I tried that, but whenever I went to set the background to repeat the background image it would have an ugly white border from Illustrator/Photoshop. I can't seem to figure out how to get rid of this! I'm also trying a gradient, which I'm making 1px wide and wanting to repeat-y across the top of the page, but I keep getting an ugly white border around that too ruining the look of it! Any ideas? I wasn't sure where else to post this so I hope it's appropiate. Any help you can offer would be appreciated, thank you!

Edited by mrsleep, 04 February 2006 - 10:49 AM.

  • 0

Advertisements


#2
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
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!
  • 0

#3
KiLleR Civilian

KiLleR Civilian

    Member

  • Member
  • PipPip
  • 18 posts
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"
  • 0

#4
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
Here's a screen shot of both the gradient I'm trying to use and the problem I'm having with it:

untitled2.JPG
untitled1.JPG

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!
  • 0

#5
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
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?
  • 0

#6
ScHwErV

ScHwErV

    Member 5k

  • Retired Staff
  • 21,285 posts
  • MVP
If you created the image large in photoshop, then shrunk it, itll have that white border.

ScHwErV :tazz:
  • 0

#7
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
<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!

Edited by mrsleep, 06 February 2006 - 01:50 PM.

  • 0

#8
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
Your code looks fine (not to doubt you, but it always pays to be sure! :tazz: )

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....
  • 0

#9
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
finally.JPG
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!
  • 0

#10
ScHwErV

ScHwErV

    Member 5k

  • Retired Staff
  • 21,285 posts
  • MVP
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 :tazz:
  • 0

#11
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
Excellent!
Maybe you'll show us the site when you're finished? :tazz:
  • 0

#12
ricangeek

ricangeek

    Member

  • Member
  • PipPip
  • 21 posts
I use grsites.com to take care of all my background needs.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP