Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Rendering the background of images

    I'd like to learn how to render a background from an image.

    I have these images.

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

    http://www.kansasoutlawwrestling.com/titles/outlaw.jpg
    Last edited by CoolAsCarlito; 03-15-2010 at 05:32 AM.

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    New York
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    830
    Thanks
    10
    Thanked 79 Times in 77 Posts

    Smile

    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:

    Code:
    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:

    Code:
    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...ckground_63214
    http://graphicssoft.about.com/od/pho...ng_Reality.htm
    http://graphicssoft.about.com/od/pho...rbps_2fwks.htm
    ☠ ☠RON☠ ☠

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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...hp?p=champions

    So I can have my title belts on that page

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    use this tag to insert in image.<body backgroud="" >

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    830
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by CoolAsCarlito View Post
    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...hp?p=champions

    So I can have my title belts on that page
    Any 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.
    ☠ ☠RON☠ ☠

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Apr 2010
    Location
    Canada
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    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; }

  • Users who have thanked Taylor24Smith for this post:

    ctoz (05-24-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •