1 person found this helpful
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
background-position: 0% 0%;
background-size: 100% 100%;
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.
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:
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:
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.
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.
1 person found this helpful
CSS Backgrounds explained
CSS Background Size: cover (resizable)
Photoshop for web
1 person found this helpful
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.
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.
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.
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:
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.
mhollis55, thank you so much for the info!!
i'll look into it