PDA

View Full Version : Backgroung pics for pages - what sizes? Anyone knows?



aspier
05-26-2005, 11:51 PM
When you use a pic for a background to your page ... what size should it be to show up as one pic on the viewers computer screen? I use a 17 inch screen and so far I work with a size width for a pic 1200 pixels. I just gamble that a 19 inch screen would show it up as one but I do not know this!

Is there not a formula one can use to calculate it?

I want the pics to be as light as possible = smallest size but I don't want them to double up on bigger screens! Any buff in here? (Help! Richard!)

Have I formulated my problem write?

as

maestrowork
05-27-2005, 12:05 AM
Most people have 800x600 resolution. Some may have 1028x768. Anything bigger (like 19" monitor.. like what I have at 1680x1050) is not the norm.

You should try to use a seamless background pic. If not, either the person's resolution is too low to display the whole thing (and miss out information), or your background will tile.

Use Photoshop or something to make the pic small. Nobody wants to download a large file just to see your background. So keep your #colors small and your graphics simple. A 20K graphic files would be fine as a background, but not 200K.

Richard
05-27-2005, 12:25 AM
There's an easy way to do it with CSS - you just say background-repeat: no-repeat; and you'll only get one copy.

aspier
05-27-2005, 11:15 AM
Maestro you are not only a super writer but a buff too! I have started digging into your suggestions.Tnx! And richard ... are you free tonight? Dinner at Pierre Victoir? Oh, you are a cool cat! Smile! You see I am still busy with the yechies of pagebuilding! I'll dig into css again today.

Recap - I understand this well?

1. Scale down background pic to a weight of Maestro's 20k using Paint Shop unauthorised version or ACDCee's.
2. Then apply a css saying 'no repeat'.

What about the quality of the 'non repeating' background? Or is this an idiotic
question.

Richard
05-27-2005, 11:34 AM
The quality will be as good as your compression - it depends what it's of, and how much you compress it.

aspier
05-27-2005, 01:20 PM
Tnx + I'm onto that now the whole blo o o detcy morning! Oh my god, back to Kindergarten Macoromedia page zero! Ok ok take a deap breath ... now go back to page one chapter css ... take another breath and start reading again! Ok I read! Anyway nice results one gets with e^perimenting eh? All croocked and such but nice ... ok, I focus on nice, don't stress me!

c u after study!

aspier
05-27-2005, 08:59 PM
Best part of the day css won! Then slowly ... eh ... I checked my site's sights and css's. Now look at this post ... I have sunken below it + off the thread out of pure shame! You haven't seen me or my site! Thank god!

DON'T LOOK!

aspier
06-01-2005, 12:28 PM
Ok you can LOOK now! Oef mission accomplished! Site's done! All I want now is posts like 'Good job!'; 'Fantastic!'; 'Boy, you are gooood!' etc. All grappy comments (even if they are true) are forbidden, ok? One's got to be strickt about these things!

http://users.skynet.be/spier/

as

MadScientistMatt
06-01-2005, 08:55 PM
I'm confused. I don't see a background image there, just a single foreground image. And that image is wider than my monitor, giving the page a large horizontal scroll bar. My resolution is set to 1280 x 1024, and the resolution is what counts, not monitor size. It's a really nice picture, but from a technical standpoint it makes the page far too wide.

Richard
06-01-2005, 09:00 PM
Ditto, I have no idea what I'm meant to be looking at.

aspier
06-01-2005, 09:47 PM
Mad + Richard

This page http://users.skynet.be/spier/ is the opening page of the site in which I want to introduce this shoe thing which comes up in the other pages. Here example = http://users.skynet.be/spier/excerptscroix.htm (size 1113 x 850) and here = http://users.skynet.be/spier/excerptsredshoes.htm. (size 1033 x 700) A background on the first page is too heavy and I tried to 'imitate' the flashlike images you have Richard. So I have used an ordinary 'insert image' but a long one so that it should fits bigger screens asz well. Mad, I didn't even see that blood y scrollbar at the bottom!

So I have TWO problems here!

1. Still the background sizes ... the 'no repeat' doesn't work! When it repeats downwards it isn't so bad, I feel but sideways is a problem. What f-king sizes is the best to have the greatest compromise between loading time and full view quality?
2. This long jpg on the index. You suggest I cut it shorter? Throw it in the dustbin. Format c:/?

Bummer? My css's re ok, no? I am as proud as a peacock of those ... so oh oh be velly diplomatic when you disagree! Sometjing like a fool's paradise + craptastic etc. Or just fugly?

mm etc such see?

Richard
06-01-2005, 10:07 PM
What do you want it to look like? Trust me, no-repeat does work - I use it for all my watermarks and other graphical twists.

If you want the shoe to stretch across the screen, however long it is, you have to put it as the background of a <div>, set it to no-repeat, and make the right-hand side of the image bleed into a flat colour. This way, when the image runs out, the background colour is there to replace it.

But it has to be set as the <div>'s background image if you don't want it stretching the screen horizontally.

aspier
06-01-2005, 11:07 PM
If you want the shoe to stretch across the screen, however long it is, you have to put it as the background of a <div>, set it to no-repeat, and make the right-hand side of the image bleed into a flat colour. This way, when the image runs out, the background colour is there to replace it. But it has to be set as the <div>'s background image if you don't want it stretching the screen horizontally.

You know richard I was last Thursday at Cap Grenis, past Callais and I watched England (the Cliffs of Dover) from there and thought about people I know in England and then you came to my mind. You taking a bath in the Roman baths in Bath etc. ... but it was the furthest far from my mind that I ever would make such an aries of myself ... with you in the company, as I am doing now! I just don't know how to do it that what you suggested! I know it has something to do with %'s etc. But how do I put it as the background of a <div>? With Macromedia and in a css? Then the no-repeat ... that's ok, I know where the switch is. And how does one bleed the image into a flat colour? Ok I know this last one is a graphics thing. But to do it proffessional etc. you know?

Here's my try http://users.skynet.be/spier/indextest.htm with <div>

Listen, anyway, and now that the whole of Europe is slowly falling apart too and even England seems farther away than Thursday, let's make a deal! You do a quick copy and a paste and put in that <div> ... make a kind of sjabloon I can then copy and blah zup and copy again. I'll take the blending from there, ok? It's just this <div>. My side of the deal ... well you can choose: a) I'll use pounds when next in London without making a fuss everytime I buy something or b) send you a shoe of a famous deary write here in Write! I'll have to ask her first though, you understand! Meantime you can copy any shoe from my page you like. Oh wait, here's one!

http://users.skynet.be/spier/clipart/lonelyshoe.jpg

aspier
06-01-2005, 11:19 PM
I've checked your site again. What a beauty! So clean and yes to the point!

aspier
06-02-2005, 11:34 AM
You know richard I was last Thursday at Cap Grenis, past Callais and I watched England (the Cliffs of Dover) from there and thought about people I know in England and then you came to my mind. You taking a bath in the Roman baths in Bath etc. ... but it was the furthest far from my mind that I ever would make such an aries of myself ... with you in the company, as I am doing now! I just don't know how to do it that what you suggested! I know it has something to do with %'s etc. But how do I put it as the background of a <div>? With Macromedia and in a css? Then the no-repeat ... that's ok, I know where the switch is. And how does one bleed the image into a flat colour? Ok I know this last one is a graphics thing. But to do it proffessional etc. you know?

Here's my try http://users.skynet.be/spier/indextest.htm with <div>

Listen, anyway, and now that the whole of Europe is slowly falling apart too and even England seems farther away than Thursday, let's make a deal! You do a quick copy and a paste and put in that <div> ... make a kind of sjabloon I can then copy and blah zup and copy again. I'll take the blending from there, ok? It's just this <div>. My side of the deal ... well you can choose: a) I'll use pounds when next in London without making a fuss everytime I buy something or b) send you a shoe of a famous deary write here in Write! I'll have to ask her first though, you understand! Meantime you can copy any shoe from my page you like. Oh wait, here's one!

http://users.skynet.be/spier/clipart/lonelyshoe.jpg



Voila! I think I got it write now, no? England's much closer now! http://users.skynet.be/spier/

as

Richard
06-02-2005, 12:20 PM
No, you haven't - you're just digging yourself into a colossal mess with frames and tables and lord knows what else. Look, it's really not hard.

Open up your CSS file, and put in this:

body {
background-color: #BACKGROUND COLOUR;
background-image: url("YOUR IMAGE");
background-repeat: no-repeat;
}

That will put an image onto the page, without repeating it. If you need to position something a bit more carefully, you need a bit of code in your HTML file, which looks like this:

<div id="header">HEADER INFO<div>

<div id="redshoe"></div>

<div id="menu">MAIN MENU</div>

...coupled up with statements like this in the CSS:

#redshoe {
position: absolute;
top: 100px;
left: 50px;
}

It's really, really not hard to lay out a page with CSS. Look at www.w3schools.com and you'll find about a zillion examples that let you make edits in a text box and see the results immediately.

aspier
06-02-2005, 01:13 PM
mm homework! I'll dig into it tonight ... point is one is making it difficult when it can run better easy etc. I am learning anyway and full time now. You also have this: getting something in your head and them hammer it till it comes write? I appreciate your suggestions and tips very much, ok?as

aspier
06-02-2005, 10:59 PM
No, you haven't - you're just digging yourself into a colossal mess with frames and tables and lord knows what else. Look, it's really not hard.

Open up your CSS file, and put in this:

body {
background-color: #BACKGROUND COLOUR;
background-image: url("YOUR IMAGE");
background-repeat: no-repeat;
}

That will put an image onto the page, without repeating it. If you need to position something a bit more carefully, you need a bit of code in your HTML file, which looks like this:

<div id="header">HEADER INFO<div>

<div id="redshoe"></div>

<div id="menu">MAIN MENU</div>

...coupled up with statements like this in the CSS:

#redshoe {
position: absolute;
top: 100px;
left: 50px;
}

It's really, really not hard to lay out a page with CSS. Look at www.w3schools.com (http://www.w3schools.com/) and you'll find about a zillion examples that let you make edits in a text box and see the results immediately.


hey richard tnx! You are such an inspiration for me ... I mean your page! Ok, you are also ok and so on. Anyway just to say thanks for the help! Problem with sitebuilding is not only the technical stuff but its the designing part. The 'neatness' of your site (I haven't read the dirty stuff on it yet - no time) proved to me once and for all that:

neat sites = clarity

here's my try so far http://users.skynet.be/spier/ only in the case you have fcall to do other to see how your student is progressing.

Now I'm going to water my shoes!

as

MadScientistMatt
06-03-2005, 12:06 AM
Looks a lot better now. For the loading time, never mind the resolution - you want to keep the total image size on each page under 50 kb if you want it to work with dial-up. On JPG images, you can simply save them with more compression.

They're very beautiful backgrounds. But a page that takes forever to load can drive away visitors - except those with high speed connections. This is getting more common, but there are still a lot of dial-up holdouts.

aspier
06-03-2005, 01:12 AM
Looks a lot better now. For the loading time, never mind the resolution - you want to keep the total image size on each page under 50 kb if you want it to work with dial-up. On JPG images, you can simply save them with more compression.

They're very beautiful backgrounds. But a page that takes forever to load can drive away visitors - except those with high speed connections. This is getting more common, but there are still a lot of dial-up holdouts.

Mad that's worthwhile feedback! tnx! I'm glad you like images. I'll work on those file sizes ok? Yes these dial-up are a bummer, no? You got dial-up? I worked on that for years and it cost a lort of money and time time. In Belgium here we are almost everyone on broadband. I hear NZ and Australia's hot on broadband too. I don't know about England and am rather durprised that many people in America are still on dial-up.

Have you check out richard's site? Do! A pleasure to woops! on it. I am going for that same clarity.

I'll put up a notice when I'm done with it finally + do you think this shoefic thing will work?

TheNightTerror
06-03-2005, 09:44 AM
For the loading time, never mind the resolution - you want to keep the total image size on each page under 50 kb if you want it to work with dial-up.

I just wanted to ask, if you warn visitors ahead of time that they're in for a page with a rather long load time on dial-up, can you get away with more than that? I have a computer game walkthrough on my site, and I literally have some segments of the walkthrough with over a megabyte of screenshots on one page.

I've got dial-up myself, so I've tried to make the screenshots as 'dial-up friendly' as possible. I always put notices on pages with any screenshots telling you how much data you'll be downloading, and I've made the resolution 640x480 or smaller for all of them, so they won't get in the way of people with lower screen resolutions.

I'm thinking of reading into HTML coding some more and figuring out a way to allow someone to choose the picture resolution before they try to load the page, so if someone's got a shiny new computer on broadband and wants to see the pictures at their original resolution, (1024x768) they can.

Richard
06-03-2005, 11:00 AM
I'm thinking of reading into HTML coding some more and figuring out a way to allow someone to choose the picture resolution before they try to load the page, so if someone's got a shiny new computer on broadband and wants to see the pictures at their original resolution, (1024x768) they can.

Er...that's what thumbnails are for ;-)

TheNightTerror
06-03-2005, 11:23 AM
Just the way I have things set up right now, I don't know if thumbnails would work. There's captions under each screenshot, and you'd have no clue what it meant unless you looked at the full sized picture, so you'd get suckered into viewing it either way. But then again, I've never been able to make anything out of thumbnails. I always have to open the full sized picture before I have any clue what it is. :Shrug:

aspier
06-03-2005, 10:24 PM
Everybody is talking about doing a bit less or rather more compression to make jpg backgrounds load faster! How do you do it? By cropping or resizing? How can I can I compress the following jpg to have the same size?

http://users.skynet.be/spier/clipart/asshoe11b.jpg

If too difficult to explain plse can someone not do it for me and mail it back to me? I can then figure it out maybe from there.

You help me with this and I will love you for ever!

as

Richard
06-03-2005, 10:29 PM
JPEG is a 'lossy' format, which means that it can throw out information it doesn't think you'll miss in order to make the image smaller. The more you throw out, the worse the end result looks, but the smaller the file. Any program that can edit a JPEG - Photoshop, Paint Shop Pro etc - will give you the option to choose how much compression to apply. Around 15-20% is usually a good baseline figure for the web, if you need to shrink something down.

That image is always going to be huge though.

aspier
06-03-2005, 10:41 PM
mmm ok, I go Paint shop now and if it doesn't work first time round then its format c for painty shoppy! In the days of dos there use to be these webgarages where one could decompress (and loose some quality) and they were easy to use etc. You haven't got any URL's of ones that operate free like?

as

Richard
06-04-2005, 01:06 AM
Don't be ridiculous. If you can save a file, you can compress it. Stop thinking everything's a million times harder than it is - it'll make it much simpler.

aspier
06-04-2005, 11:41 AM
I know but the thing is I know nothing about graphics and a fool sees it always bigger ... the backgrounds. Smile! Tried Paint Shop + Adobe + stupid webgarages. Site's more or less structured now and I'll take my time first to learn the programs now - maybe even fireworks of macro. Its a lot of stuff for me. I'll keep this in mind = 'easier' and that other one I've learned from you = 'clarity results neatness' or the otherway round, is it? Good teacher you! Tnx! There's another thing too though! Nobody looks at pages! I am possitively sure of that! Its all about own horn blowing! Rofl!

Seen the meta txt thread? Got any comment?

+ here's a nice one no? = http://users.skynet.be/spier/excerptsbluesweet.htm

biotales
06-04-2005, 04:52 PM
Ya know there are just some strings that I should just stay away from.
So I am off to get a glass of wine and sort this string out of the confused mess it has me in....
:Shrug:

aspier
06-04-2005, 05:20 PM
Ya know there are just some strings that I should just stay away from.
So I am off to get a glass of wine and sort this string out of the confused mess it has me in....
:Shrug:

Where you drinking? Kitchen? Wife out?

aspier
06-05-2005, 01:37 AM
Next question: since big chuncks of jpg background files (over 250k) load slow ... why not load two? I am serious! One light one that loads in 0.70 seconds to keep the viewer's attention while the other one loads in 20 seconds and comes up later! get the idea?

example = with one inserted jpg + background = http://users.skynet.be/spier/excerptssteel.htm

Can one load 2 background jpgs on one htm file? How?

Richard
06-05-2005, 02:02 AM
You're worrying about the wrong things again. Design the page that you think will look best when loaded, then go back and make it work. If you've got a 250KB background image, you've got a quarter of a megabyte of picture that people do not care about.. You need to think how you're going to use the images to bolster the text, not shoving ludicrously oversized, unnecessary pictures of shoes down their throats. Work with the limitations of the medium rather than trying to think up clever ways of going around them.

As for multiple background images, no, you can't - the closest you can get is having a background image and a colour. You can however overlay elements using <div>s. If you take a look at my page as an example, the background image has the white space, the blue arrows, the interlacing and all that jazz. The text column has its own background image, which adds the watermarks to the bottom of each page.

aspier
06-05-2005, 07:25 PM
I know it! In a way though there is something to say for uploading while nobody is watching. ... or use on small pages deep down at the bottom of it a pic you can use later etc.

Yes but that's having a wrong attitude. I think best thing is one should know beforehand what you want to do and how etc. So far I have worked creatio ex nihilo and that wastes time. I'm settling now for now for the shoe department as a soft soap glossy shipt line of pages. Maybe I'll let them loop automatically like pornclips and all writer aspirators can have the same orgasm over and over again watching them. Spier's poetry galore ... free!

Example = http://users.skynet.be/spier/excerptsbluesweet.htm
looks innocent crappy no? Loads normally though + at this one I have used a pic (towards the bottom) I will flash at a next click because this page is one of the more light ones.

tnx again for your help say!

summary YOUR site

- clarity/transparency
- not too many clicks
- first things first = 's saving
- vision = what what

you score close to a 9 re these for your site!

And now I am f-king off to visit 4 art galleries in Ahrnem (Dutch land) for a couple of days! I'll tell them there about you and Write (but I won't mention my stupid site, ok?)

as

biotales
06-09-2005, 03:41 PM
Where you drinking? Kitchen? Wife out?
I drink where I want..... and I have no wife.... cuz I am a female.... but I was a wife once.... does that count... ?:ROFL:

aspier
06-09-2005, 06:14 PM
Ooooooo! oh oops! write! yes it counts, so you are in! Got ant red shoes ... feet that go with them?

http://users.skynet.be/spier/excerptsredshoes.htm

*wink*

biotales
06-09-2005, 06:36 PM
Ooooooo! oh oops! write! yes it counts, so you are in! Got ant red shoes ... feet that go with them?

http://users.skynet.be/spier/excerptsredshoes.htm

*wink*
Oh, but of course I have red shoes.
What type of southern woman would I be....?
and my feet are off limits to anyone who thinks they should be in the center fold for playboy..... my feet do not do such things sir...

aspier
06-10-2005, 12:32 AM
Mmm is a hard day's walking no? Got poems? (since we are going to drink together ... small talk first sure)

smile

aspier
06-10-2005, 01:00 AM
There's another thing re 'backgrounds' that came to me when I was away now and somewhere else ... well in Macromedia one can select 'mainframe', 'parent', 'blank' etc. and everything the specific kind of frame opens. Now, can one not tamper with the code to such an extent that 2 window frames open on the screen ... say cutting the screen exactly in half? Now that would be something, no? In the one frame you have the text and in the other an arty backgound conserning the text.

Say, why not?

biotales
06-10-2005, 01:20 AM
Mmm is a hard day's walking no? Got poems? (since we are going to drink together ... small talk first sure)

smile
Of course I have poetry.... doesn't everyone?