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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Background Image

    If I want the background image for a page to be a gradiented image that I created, what size should I make it so It is viewable in all screen resolutions? If I make it 1024x768 then people with 600x800 would get unnecisary scroll bars... Thanks for the help

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There will be no scroll bars if it's a background image.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    800 x 600 is probably the best choice for a size. At 1024 x 768, it would just tile (unless you set the value of background-repeat to "no-repeat"). Unless this isn't a true background image. Is it an image that has a negative z-index? That was the impression that I was getting, but that just means you can make it any size by stretching it via the height and width properties.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Some more info please

    Having a look at this background image of yours would be a great help in determining how big it should be and in what direction, and if there's a possibility of putting tiling to good use; also, your assumption that a large background image would cause scrollbars to appear suggests you're not implementing a true background image at all.

    A link to an online page, no matter in what state of progress, would be appreciated.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do something like this using the attached image (a simple gradient created in Photoshop). The image is 1px wide by 600px tall and the body background color is matched to the 2nd color in the image. The repeated image is much smaller than an 800 x 600 or larger image.

    Code:
    <body style="background:url(gradient.gif) repeat-x #f3813c;">
    
    </body>
    Attached Thumbnails Attached Thumbnails Background Image-gradient.gif  
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the same image Mark uploaded, you could have the gradient at the bottom of the page:

    <body style="background: #fff url(gradient.gif) repeat-x bottom left;">

    </body>

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Sorry for the lack of info. It was just a gradient bg image so I just set it to no repeat and it works fine, I thought it would just make scroll bars instead of stretch but it works fine.

    Thanks


  •  

    Posting Permissions

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