March 31, 200818 yr Hi, I would like to have my sites background similar to the way this site is done, where on the left and right hand side there is a slight gradient effect. How do I go about doing this? Thanks Danny
March 31, 200818 yr 1. open up photoshop or your favourite drawing program (GIMP is free). 2. create a canvas which is 1000x1 (yes, height = 1px) 3. select your colour palette 4. select the gradient tool 5. click at on end of the canvas 6. click at the other end of the canvas 7. save as PNG, + GIF, + JPEG - the file size here is a bit of an unknown, so compare them and choose the best trade-off between size and qaulity. Ok, so that is the image created, now to make it work in our HTML+CSS. Assuming your image is located in the same directory as your CSS, and it is called "bg_grad.png" (just guessing here), add this to your CSS: #COLOR must be the right-hand colour of the gradient body { background: #COLOR url(bg_grad.png) repeat-y; }
March 31, 200818 yr ^^ What he said. Although I would add that you should align the body background as "top center" in the CSS
April 1, 200818 yr Author Thanks for the replies but it doesnt work correctly? I have created the image (I think) correct... I have attached the image Thanks Dan
April 1, 200818 yr Firstly, that gradient is very strong, for the background it needs to be way, way, way more subtle (closer colours) Secondly, am I right in thinking that what you are actually asking for is the drop shadow on either side of the main "page" which makes it look like it's standing out from the background rather than the actual background gradient itself? If so then this is a drop shadow, not a gradient, although they can be done using the same tools. Create a small canvas about 25x1 pixels, and make the gradient, then copy and paste it onto your bigger canvas. Rotate the original small canvas 180degrees and copy and paste it on to the other side of your canvas. Move the two gradients such that the space between them is how big you want it, as this will become your "page" area. Now set it to the background and make it repeat along the y axis. Is this what you were after?
April 1, 200818 yr Author OK thanks ErisDS, I'll give it a try later when I finsih work, one small question I want to make my forums layout similar to this forums layout, now if I was to the add css background (the way you suggest) to my forum would it still look in perspective if my forums width was set to fluid rather than a fixed width or would I need to set my forum to a fixed width? Thanks Danny
April 1, 200818 yr If you use a fixed background image you would need to use a fixed width forum. Otherwise you could use two separate background images.
April 1, 200818 yr Author OK thanks, You dont by any chance know what the fixed width of this forum is do you? Thank again ErisDS Dan
April 1, 200818 yr If you right click on any website you can view it's source code and find any of this kind of information out for yourself Looking at the source for these forums you can see that the first mentioned stylesheet is: http://www.webdesignerforum.co.uk/style_images/css_3.css And that the first element after the <body> tag is: <div id="ipbwrapper"> If you take a look at this, and scroll down a lot you will find #ipbwrapper you can see that it says the width is set to 990px. Be very careful though Dan, it is fine to take ideas and inspiration from websites for your own sites, but if you end up with something too similar you could get into trouble for stealing Intellectual Property.
April 1, 200818 yr Author Thanks ErisDS what you suggested worked a treat thank you Also how is asking the width and how the bg was done Plagiarism? Thanks Dan
April 2, 200818 yr Look, learn, and implement, but never steal Exactly! Thanks ErisDS what you suggested worked a treat thank you Also how is asking the width and how the bg was done Plagiarism? Thanks Dan It isn't, but there is a fine line! I didn't want to talk about how to find out the details without posting a small warning of the dangers.
Create an account or sign in to comment