SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to create this background graphic? advice needed

    Hi Folks,

    I'd like to have a background image as below. Problem is its really big and takes a while to load.

    I've just set it to the background of the body tag.

    http://www.vhairandbeauty.co.uk/wp-c...s/1500x900.jpg

    Can anyone please tell me the most efficient way to create a background graphic like this? and which screen resolution should I design it for?

    Many thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That image looks like it will tile, so I'd suggest that you cut out a square section of it that can repeat infinitely, and apply it to the body element.. Then, on the main content div, place as a background image a semi-transparent, circular gradient image from white in the center to transparent on the outside that will give the light center effect.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies.

    Could you please tell me what type I need for the image, will jpeg do it?

    Thanks again

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Jpeg for the wallpaper and a png for the shadow would be fine.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for you reply.

    Just to confirm, what type of PNG is it, 8, 24 or 32?

    Does the canvas need to be trans?

    And is it alpha or index trans?

    Thanks again

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mattastic View Post
    Just to confirm, what type of PNG is it, 8, 24 or 32?
    Sometimes 8 is fine, but 24 will give you better quality—especially in a gradient. I'd say only go to 32 if you really have to. I've never used it. With all these questions, just experiment around a bit and see what looks best, and weigh that against file size. The simpler the better.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You know, this would be a perfect job for progressive enhancement.

    If you create a repeating tile AND a vignette, you would end up making a MUCH heavier D/L.

    1) there would bve two HTTP request
    2) You would still have to make ONE large file
    3) that large file would have to support multiple layers or transparency, so its' going to have to be a PNG 24 or 32 in other words HUGE FILE

    :/

    I would opt for a little math and a JPG.

    1) you can use as is and fade the bottom out to a solid color ( or not, if this is the bg to your page, you could use background-position fixed, so that the content would scroll but not the image)

    or

    2) Use as is + add a repeating jpg ( making sure the vignette and tyles end at a concurrent point .. this mean MATH! and yes two http request )


    or

    3) a JPG and CSS3 radial gradient as a second element bg ( for browsers that support it). even experiment with background-size property of the second ( vignette) bg so that it adjust (or doesn't) to fluid layouts. With CSS3 you can also mix and match from my suggestions above for optimal results

  8. #8
    SitePoint Enthusiast ilovemedia's Avatar
    Join Date
    Jan 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There seems to be a repetition of tiles in the photo. You might just need to focus on one tile and repeat it a number of times depending on your size preference.

  9. #9
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Bangladesh
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just use illustrator for everything. If your just putting it on top of a background, there's no reason why you can't use illustrator. Then your logo stays in a vector format, which I always think is best.

  10. #10
    SitePoint Member KeithKarr's Avatar
    Join Date
    Aug 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trace it in illustrator, create a tiled image [ patch work if you will ] then export your gif, png, jpeg...what ever you prefer!


Bookmarks

Posting Permissions

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