I got this webpage design from a graphic designer. How do I take the bg from her webpage design and use it as a bg for the website? I’ve tried slicing it but it, of course, doesn’t look right b/c of the gradients and you can see all the divisions upon repeating the slice. Another designer I worked with sent me a small file quickly for the same kind of thing but have no idea how she did it. Does that make sense or do I ask her to send the bg file separately and if so, what do I ask for?
Oh…I use Fireworks.
Thanks so much in advance for your help!
Yes, that’s the correct answer make a fairly thin gradient strip of the correct colours then use CSS to repeat in the y-axis as it would be the most efficient procedure and keep file sizes down.
Thank you both. I’ve actually got the css. It’s the graphic I’m needing help with. I think recreating it is best since there is no slice to cut at the bottom. I don’t want the white/green columns in the bg. It’s the body bg.
I think I’ve got it. Recreate a rectangle and use gradiant fill.
yes it looks like a psd or design of the website. Remember that everything you do in photoshop you cant implement on the web-- yet. I learned that the harsh way.
I have some questions tho,
What part of the image you linked in post one are you talking about to use as a background?
So you want to use the gradient as a background for the vertical-left menu?
Lastly, do you want said background to apply to the whole site or a specific area?
I’m am slighty confused here; is that screenshot the image you were given or do you (or somebody) have an actual example site using that gradient?
It would probably be nearly as easy making a new image.
However, if the screenshot was all you were given. Essentially all you really would need is to cut the bottom section under the green a white main content, i.e. making a rather thin long rectangle.
You could then apply CSS to make it repeat in the y-axis. If you visit my abandoned website you’ll see I use a blue-to-black gradient image but the PNG image dimension is only: 800px by 5px I just repeated it in the y-axis with CSS.
The green and white (main content) should be done with wrappers anyway so the gradient would not affect them. For an extremely simplified version of what I mean where; ‘example.png’ is some image filename you want to use as background.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Background Image
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
background: orange url("example.png");
background-repeat: repeat-y;
}
#content {
width: 300px;
height: 300px;
background-color: green;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="content">
<p>
Lorem
</p>
</div>
</body>
</html>
Obviously that is over simplified but if you make an image called example.png and save that code as a *.htm file and put them in the same directory you’ll see the image repeating instead of the orange fall-back when opened in a browser.
Hopefully that solves part of your issue if you are still stuck try the CSS section of the forums as I think that is really what you don’t fully understand regarding the image being behind the main content.
That looks like a screenshot rather than a background image. You need the original gradient ‘background image’ file first as that one is compressed too much in the screenshot for it to be of any use.
Ask for the actual background image file which in this case was most likely a JPG file.
Right. I have the jpg file. Didn’t want to upload such a huge file so I compressed. But, as you can see, there’s no slice I can take out w/o the green sidebar and white content area. If I do grab the green and white, I don’t understand how to calculate how to make it overlap perfectly on the web page (I didn’t design this :-).