Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

backgrounds

  • 22-09-2012 1:13pm
    #1
    Registered Users, Registered Users 2 Posts: 1,298 ✭✭✭


    While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?


Comments

  • Registered Users, Registered Users 2 Posts: 1,082 ✭✭✭Feathers


    While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?

    It depends on people's resolution that they're using & the type of image you're using. With faster speeds now, people sometimes have a slightly larger filesize for a good quality photo & can stretch it to fit using JavaScript.

    If it's not a photo but a pattern, people often just make the image larger enough to 'tile' — repeating across or down the page. E.g. If you want a gradient background you can have an image that's just 1px wide & tile it across the page — it makes for a very quick load time as the image will only be a few KB.

    Apart from either of the above, it's hard to make an image fill the entire screen, as you can't tell what size people have their resolution set to — this is getting more true with people on mobile, tablet & a range of monitor size/quality than ever before. Another option would be to use CSS3 media queries to serve different images to different sizded screens.

    Depends on your target audience & how much effort you want to put in :)


  • Registered Users, Registered Users 2 Posts: 54 ✭✭tatrman


    While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?

    you can always stretch the background. Be aware that it can look significantly different with different screen proportion.


  • Registered Users, Registered Users 2 Posts: 1,298 ✭✭✭off.the.walls


    http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?


  • Registered Users, Registered Users 2 Posts: 1,082 ✭✭✭Feathers


    http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

    In their case, badly — it's a linear gradient (so exactly the same on any vertical slice) — they have it as an image 247px wide x 1659px high.

    Since it's the same all the way along, they could have it as an image 1px wide. Also, after around 600px from the top, the rest of the image is a solid colour — at this point they should crop the image & just specify a CSS background colour on the <body> element.

    So it could be 1x600px image rather than 247x1659px image. Your CSS would then be roughly:
    body {
        background: url("path-to-image.jpg") repeat-x #333;
    }
    

    Repeat-x gets it to tile from left to right, the "#333" specifies a shade of grey for the background when the image 'runs out' after 600px.


  • Registered Users, Registered Users 2 Posts: 54 ✭✭tatrman


    http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

    you can have multiple images in background and position them relative to container.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 1,082 ✭✭✭Feathers


    http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

    Sorry, missed where you said "with the images on it" — what images do you mean? From what I can see, every image seems to be related to a 'foreground' element, apart from the grey gradient.


  • Registered Users, Registered Users 2 Posts: 1,298 ✭✭✭off.the.walls


    Feathers wrote: »
    Sorry, missed where you said "with the images on it" — what images do you mean? From what I can see, every image seems to be related to a 'foreground' element, apart from the grey gradient.


    221665.png see the way the lines in the background blend in as part of the background?


  • Registered Users, Registered Users 2 Posts: 10,902 ✭✭✭✭28064212


    Here's a link to that image: http://www.creativedigitalmedia.ie/wp-content/themes/creativedigitalmedia_2/images/home_bg.gif (right-click on the section and choose "View Background Image"). They use a transparent image.

    Boardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, dark mode, and more). Now available through your browser's extension store.

    Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/

    Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce



  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Feathers wrote: »

    Since it's the same all the way along, they could have it as an image 1px wide. Also, after around 600px from the top, the rest of the image is a solid colour — at this point they should crop the image & just specify a CSS background colour on the <body> element.

    A few things to be cautious about wrt 1px bg images:
    • There has been in the past problems using them due to rounding error bugs resulting in messed up displays. Not sure how relevant it is these days.
    • Some devices with low processing power perform badly when having to redraw the image so many times. This mainly applies to 1x1px bgs as opposed to single px lines.
    • On a practical level, it's easier to see what's going on with the background if there's a bit of width.

    Due to the above, I'd advise using bg images with at least 10px on one dimension.


  • Registered Users, Registered Users 2 Posts: 1,082 ✭✭✭Feathers


    tricky D wrote: »
    A few things to be cautious about wrt 1px bg images:
    • There has been in the past problems using them due to rounding error bugs resulting in messed up displays. Not sure how relevant it is these days.
    • Some devices with low processing power perform badly when having to redraw the image so many times. This mainly applies to 1x1px bgs as opposed to single px lines.
    • On a practical level, it's easier to see what's going on with the background if there's a bit of width.

    Due to the above, I'd advise using bg images with at least 10px on one dimension.

    Hmm, never had issues with 1px width images, but haven't used 1x1 alright (as that'd just be a solid colour, so I'd just use CSS :)). Normally would be gradients of e.g. 200px x 1px.

    I agree that bandwidth is fairly cheap these days comparitively, though if you're a JS heavy page, the last thing you want to do is slow it down with unnecessarily large images & every little helps. All the more for mobile now too.


  • Advertisement
Advertisement