Backgroung pics for pages - what sizes? Anyone knows?

Status
Not open for further replies.

aspier

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
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

Fear the Death Ray
Super Member
Registered
Joined
Feb 11, 2005
Messages
43,746
Reaction score
8,652
Location
Los Angeles
Website
www.amazon.com
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

13th Triskaidekaphobe
Super Member
Registered
Joined
Feb 12, 2005
Messages
1,868
Reaction score
316
Location
England
Website
www.richardcobbett.co.uk
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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
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.
 

aspier

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
stressed up

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!
 

MadScientistMatt

Empirical Storm Trooper
Super Member
Registered
Joined
Mar 30, 2005
Messages
1,692
Reaction score
252
Location
near Atlanta, Georgia
Website
madscientistmatt.blogspot.com
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.
 

aspier

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
mm etc such see?

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

13th Triskaidekaphobe
Super Member
Registered
Joined
Feb 12, 2005
Messages
1,868
Reaction score
316
Location
England
Website
www.richardcobbett.co.uk
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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
<div>

Richard said:
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!

lonelyshoe.jpg
 
Last edited:

aspier

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
England's much closer now!

aspier said:
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!

lonelyshoe.jpg



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

as
 

Richard

13th Triskaidekaphobe
Super Member
Registered
Joined
Feb 12, 2005
Messages
1,868
Reaction score
316
Location
England
Website
www.richardcobbett.co.uk
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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
tnx we go school again

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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
water my shoes

Richard said:
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.


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

Empirical Storm Trooper
Super Member
Registered
Joined
Mar 30, 2005
Messages
1,692
Reaction score
252
Location
near Atlanta, Georgia
Website
madscientistmatt.blogspot.com
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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
MadScientistMatt said:
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

Super Member
Registered
Joined
Apr 28, 2005
Messages
148
Reaction score
8
Location
Way out in the boonies, in British Columbia, Canad
Website
tnt.freylia.net
MadScientistMatt said:
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

13th Triskaidekaphobe
Super Member
Registered
Joined
Feb 12, 2005
Messages
1,868
Reaction score
316
Location
England
Website
www.richardcobbett.co.uk
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

Super Member
Registered
Joined
Apr 28, 2005
Messages
148
Reaction score
8
Location
Way out in the boonies, in British Columbia, Canad
Website
tnt.freylia.net
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

Banned
Joined
Mar 4, 2005
Messages
3,172
Reaction score
261
Location
I live in my poetry and stories ... sometimes the
Website
users.skynet.be
for ever

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

13th Triskaidekaphobe
Super Member
Registered
Joined
Feb 12, 2005
Messages
1,868
Reaction score
316
Location
England
Website
www.richardcobbett.co.uk
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.
 
Status
Not open for further replies.