Results 1 to 9 of 9

Thread: Background image to short on the page

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default Background image to short on the page

    Hi,

    I have a background image which needs to be slightly longer on the page.
    Looking at the link shown below you will see what i mean.
    Scratching my head with how to overcome this as if i remember correctly in the past the image started to repeat itself.

    The page in question as shown below
    http://www.theremotedoctor.co.uk/ebay_programming.html

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    This might work:
    Code:
    body{
    background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
    background-repeat: no-repeat;
    background-size: cover
    }

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Kind of,it will be ok for what i require.

    Thanks

  4. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    This would look a lot better on your page:

    Code:
    body{
    background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
    background-repeat: no-repeat;
    background-attachment: static;
    }

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Quote Originally Posted by styxlawyer View Post
    This would look a lot better on your page:

    Code:
    body{
    background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
    background-repeat: no-repeat;
    background-attachment: static;
    }
    background-attachment: static; is the default value so it would be no different from what the OP already has.

    I would go with background-size: cover; too, or serve different images with media queries (portrait/landscape)?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Hi,

    Do i need to use the code shown below then ?

    body{
    background-image: url(http://www.theremotedoctor.co.uk/eba...600x1400.jpg);
    background-repeat: no-repeat;
    background-attachment: static;
    background-size: cover;
    }

    Or advise otherwise so i can copy/paste.

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Here is the latest update.

    Shown on the internet http://www.theremotedoctor.co.uk/ebay_programming.html

    Shown on Ebay where it is used ebay.co.uk /itm/400853854590?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
    Last edited by Beverleyh; 01-31-2015 at 12:54 PM. Reason: Formatting

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    The CSS that Arie posted;
    Code:
    body{
    background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
    background-repeat: no-repeat;
    background-size: cover
    }
    background-attachment: static;is not needed because it is already the default setting. It doesn't hurt to redeclare it but it it not necessary (it is duplicating styling that is already there).
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  9. #9
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    Thanks very much.
    I will now delete the example page and just go with the ebay link.

Similar Threads

  1. Replies: 1
    Last Post: 11-22-2012, 10:21 PM
  2. Resolved CSS Need to stretch a background image 100% length of page
    By revisedcode in forum CSS
    Replies: 4
    Last Post: 02-01-2009, 08:10 AM
  3. Replies: 2
    Last Post: 07-28-2008, 06:39 PM
  4. Replies: 0
    Last Post: 06-04-2008, 03:54 PM
  5. background image with a streatched page
    By isaac_cm in forum CSS
    Replies: 3
    Last Post: 08-27-2007, 12:12 AM

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
  •