10 Replies Latest reply: May 16, 2013 3:14 PM by Kar209 RSS

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

    Kar209 Community Member

      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!!

        • 1. Re: Totally Green Newbie has Q re: size & resolution for web BG
          Ben Pleysier CommunityMVP

          Have a look at this background image http://pleysier.com.au/images/bg.png

           

          Then have a look at its application http://pleysier.com.au/index.php

           

          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.

          • 2. Re: Totally Green Newbie has Q re: size & resolution for web BG
            Nancy O. CommunityMVP

            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.

            PS-4up.jpg

             

             

            Nancy O.

            • 3. Re: Totally Green Newbie has Q re: size & resolution for web BG
              Kar209 Community Member

              Ben,

               

              Thank you so much for your help.

               

              Please pardon my ignorance. I know I have a ton to learn/read but i really just wanna get this right for my friend.

               

              Some Q's:  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? i feel awful numb for asking this question.  

               

              I couldn't get Adobe.com to load today until just now and so before I was able to read your post I made a file that I was just about to try out on my friends site and good thing I didn't try it b/c the site would have probably loaded at dial up speed.

               

              Here is a sample of the pattern I am trying to work with:

               

              ETC-Pat-5%.png

              The pattern is set at 5% opactity and the dimesions are: 159 x 135 and I have saved it as a png.

               

              I made a New Document and set the size as 2500 x 5000 at a resolution of 72.

               

              I was going to try one with a transparent BG and an other with a white BG but the file sizes at the above dimensions are 232KB for the white BG and 500KB for the trans BG. So, after reading your post I understand that I am totally off the right track.

               

              I still don't quite understand. Do I just make a document about the size of your first image and then set it repeat x & y or is it -x & y or just like your code ... or something to this affect? or because the BG is static do I not use the repeat "thingy"

               

              Also, the website is a responsive Wordpress theme and so my other friend that made it doesn't use CSS to install the BG.

               

              Here is a smaple of how I would like the pattern/BG to look on my friends site:

               

              ETC-Pat-Sample.png

              Again, thank you so very much for helping me to work this out. I realize I've put the carriage before the horse but when I said I'd help my friend I thought I would just read a tutorial and understand what to do. Much to my frustration I totally underestimated the (what seems to be) complexity of making BG's for websites. Or, am I making this more complicated than it actually should be. I guess I just haven't read enough and what I have found to read has been incorrect.

               

              Sorry this post is so long. I appreciate your time & efforts.

              • 4. Re: Totally Green Newbie has Q re: size & resolution for web BG
                Kar209 Community Member

                Nancy,

                 

                Thank you a bunch!! I had totally forgotten about the 4 up window!! I have actually only had one occassion to use it and that was when I had done a beginner tutorial abou a very simple annimated graphic image. It was just some text with a gradient around it that flashed. (But heck, I was still proud. lol)

                 

                Any way, if by any chance you know of any good resources for me to learn more about making backgrounds for websites I would greatly appreciate any links you may have handy.

                 

                Thanx again for taking the time to help me.

                • 6. Re: Totally Green Newbie has Q re: size & resolution for web BG
                  Ben Pleysier CommunityMVP

                  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.

                  • 7. Re: Totally Green Newbie has Q re: size & resolution for web BG
                    Kar209 Community Member

                    thank you ben.

                     

                    sorry to just return now. woke one day to my laptop having been 100% wiped. thank goodness for online backup. took forever but everything was saved!!

                     

                    again, thanks to the both of you for all your help. i will come back to let you know how the sites comes out and if i was able to make it work.

                     

                    take care

                    • 8. Re: Totally Green Newbie has Q re: size & resolution for web BG
                      Kar209 Community Member

                      hey so i just wanted to check in

                       

                      i haven't been able to solve the issue of how to make a website background ... generally speaking.

                       

                      still confused about size, resolution and how to make a bg where it works no matter if it's viewed on an ipad, cell phone or the various sizes of laptops.

                       

                      the pattern i was trying to make for my friends wordpress site didn't work out b/c the script for his site breaks up the pattern so that it doesn't flow nicely.

                       

                      i actually had to put this quest on the back burnner because i bought a new laptop which turned out to be a total nightmare. i was finally able to get a nice GPU but there's a huge problem between it & windows 8 as i think i understand.

                       

                      but the issue has been solved enough so that i can actually start using Ps again for the first time since the 1st of may.

                       

                      if i get this bg thing down i'll return to let others know what worked for me.

                      • 9. Re: Totally Green Newbie has Q re: size & resolution for web BG
                        mhollis55 Community Member

                        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.

                        • 10. Re: Totally Green Newbie has Q re: size & resolution for web BG
                          Kar209 Community Member

                          mhollis55, thank you so much for the info!!

                           

                          i'll look into it