Skip navigation
Currently Being Moderated

Totally Green Newbie has Q re: size & resolution for web BG

Mar 23, 2013 5:51 PM

Tags: #help #resolution #dreamweaver #cs6 #background_image #image_resolution #what_resolution

Hello:                                                                                                Level: Never used Dreamweaver just Ps & Illy Cs6 thus far. >  OS: Windows 7-64 bit 



Thank you for reading my post. I really appreciate your time.


I am new to graphics and I haven't even begun to delve into Dreamwearer ... though it is on my list of things to start right away.


Any way, I would like to make a background for a friends website. I have already made the pattern (from his logo) but i cannot seem to locate (via Google or here w/the manual or FAQ's) information about what size and resolution I should make the BG. The info I have found has been quite confusing. eg. some seem to call the height/width the resolution.


The website itself is a template and as I understand, it has a static/fixed BG. How does this play out for computers with differnt screen sizes and resolutions? Is there a way I can make the BG so that it (its aspect ratio) looks pleasing no matter if someone views it on a ...10 inch, 15, 17.5... etc. screen and on their mobile devices?


I have been learning to make icons with Ps & Illy and I have always set the Resolution to 72 but the other day I was reading about patterns and the author had his set to 150. I have read about Resolution but I'm still not perectly understanding when I should use what resolution. So, any advice as to what resolution I should set my background pattern to?


I'm hoping there's a simple answer.


I hope I asked this question well enough.


Thanx again for your time and effort!!

  • Currently Being Moderated
    Mar 23, 2013 8:48 PM   in reply to Kar209

    Have a look at this background image


    Then have a look at its application


    This is the CSS for the image

    body {

      background-color: #003466;

      background-image: url("../images/bg.png");

      background-position: 0% 0%;

      background-clip: border-box;

      background-origin: padding-box;

      background-size: 100% 100%;

      background-attachment: fixed;


    I always use the smallest image possible to assist with rendering and band width. The size of the above image is 30KB. The image has been stretched to 100% of the width and the height. Not all images are adaptable to stretch in both directions because of their aspect ratios. In that case I would only use 100% width and have the height of the image so that it covers all possible heights.


    As far as the resolution is concerned, this is again a matter of size. The higher the resolution the larger the size of the image. Be careful when using images that are larger than 150KB. Sometimes this means the difference in using PNG, JPG or GIF with SVG as a rising star.


    As a last note, if it comes down to looks and size, I choose size.

    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 10:31 AM   in reply to Kar209

    In Photoshop, go to File > Save for Web.  See screenshot below.

    Use the 4-up panel to select the best quality image with smallest file size.




    Nancy O.

    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 4:51 PM   in reply to Kar209
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 6:47 PM   in reply to Kar209

    the image you shared with me ... is that a sample of the size image you used for the website? or is it the actual size you used and it was stretched to fit the site?

    It is the actual size stretched to 100% as reflected by the style rules.

    Mark as:
  • Currently Being Moderated
    May 16, 2013 6:41 AM   in reply to Kar209

    OK, here's the deal with WordPress:


    Every time someone "installs" a theme or another widget in a WordPress site, it injects a whole lot of code in the style sheet. And CSS stands for Cascading Style Sheet, so stuff that is put in after the original stuff gets a redefinition. So, if your background is set up and something redefines that background, this isn't your fault unless you're trying to edit the CSS.


    If you are trying to edit the CSS, you want to look for all instances of:

    background-image: url


    in the style sheet and figure out if that code is, or is not, affecting what you are trying to do.


    Photoshop's Save for Web and Other Devices (on a Mac it's [command]-[shift]-[option]-S) can be your friend here, as it sets up your image file to be saved at 72 dots per inch in RGB format as either a .JPG a .GIF or a .PNG file. These are the types of files you may use on a website.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points