...

View Full Version : Rendering the background of images



CoolAsCarlito
03-15-2010, 05:30 AM
I'd like to learn how to render a background from an image.

I have these images.

http://www.kansasoutlawwrestling.com/titles/undisputed.jpg

http://www.kansasoutlawwrestling.com/titles/outlaw.jpg

SSCR9
03-15-2010, 11:46 PM
What do you mean "render a background"?? like compress it? or make it repeat seamlessly?

Try GIMP's feature "Make Seamless"

I think photoshop has it too, but I'm running linux ATM so my mind is in the open-source world.

Major Payne
03-16-2010, 12:47 AM
Just in case you might mean as a background for a web page, the images will have to first be made web ready. This will require use of any good graphics editor to resize photos for the average size web page and to reduce the file size further if need be by compressing them more.

Background Image Code:

For the body tag example:


body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}

That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.

For a tiled image, which I doubt you'll use with those images, change to:


body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}

Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a dib wrap container.

If you are talking about removing a background, here are some Photoshop tutorials:

http://www.tutorialdash.com/tutorial/adobe-photoshop/photo-editing/view/Change-a-Photos-Background_63214
http://graphicssoft.about.com/od/photoshoptutorialschanges/Changing_Scenes_Removing_Backgrounds_Altering_Reality.htm
http://graphicssoft.about.com/od/photoshop/l/blrbps_2fwks.htm

CoolAsCarlito
03-16-2010, 11:38 PM
No what I want is for to either crop around the title belts or something so that I can replace the image place holders on this page:

http://www.kansasoutlawwrestling.com/backstage/content.php?p=champions

So I can have my title belts on that page

zeeshan_2011
04-01-2010, 09:15 AM
use this tag to insert in image.<body backgroud="" >

Major Payne
04-01-2010, 01:31 PM
No what I want is for to either crop around the title belts or something so that I can replace the image place holders on this page:

http://www.kansasoutlawwrestling.com/backstage/content.php?p=champions

So I can have my title belts on that pageAny cropping of the image or removal of the background information can be done with any GOOD graphics editor. There are many good and FREE ones available. GetPaint.net is easy to use.

stevey17
04-10-2010, 12:14 AM
you will want to use photoshop or gimps pen tool to create an outline of the image and delete the background. some sites like planetrenders.com i think have render requests

Taylor24Smith
04-27-2010, 02:20 PM
img {
image-rendering: optimizeQuality; /* Firefox 3.6 */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */
}

/* applies to GIF and PNG images */

img[src$=".gif"], img[src$=".png"] {

image-rendering: -moz-crisp-edges; /* Firefox 3.6 */
-ms-interpolation-mode: nearest-neighbor; /* IE 7+ */
}

/* applies to all images and videos of the document, including background-images */

html { image-rendering: -moz-crisp-edges; }

div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges;
}

video { image-rendering: optimizeSpeed; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum