Background Positioning

Hello.

After getting great advice on positioning, I've edited my code and it's
looking more stable.

Now I need a little assistance with background image placement.

Please click on this link: www.ibtestsite.info

I've colored the background black and added a background image which is the
blue rectangular image that stretches the height of the screen (well at least
in Firefox it does). My goal is to have a centered page with no scroll bar
for up and down movement or left and right.

I've played around with body {....background-position: "whatever" px;} and
it's not doing anything.

Any advice on how to do this?

In article <7d23aae2b99dc@uwe>, "LayneMitch" <u39402@uwe> wrote:

Hello.

After getting great advice on positioning, I've edited my code and it's
looking more stable.

Now I need a little assistance with background image placement.

Please click on this link: www.ibtestsite.info

I've colored the background black and added a background image which is the
blue rectangular image that stretches the height of the screen (well at least
in Firefox it does).

Not in my FF. 2.0.0.11 Mac The black appears at the bottom as
well as the sides.

My goal is to have a centered page with no scroll bar
for up and down movement or left and right.

That would surely be unwise? Have you got something against
people with small screens or who prefer not to use the height of
theirs?

O and by the way, have you an address for the undernourished girl
on the page? I have some nice potatoes here that I would like to
send her. I feel all motherly towards her and would like to
fatten her up for Xmas.

--
dorayme

dorayme wrote:

O and by the way, have you an address for the undernourished girl
on the page? I have some nice potatoes here that I would like to
send her. I feel all motherly towards her and would like to
fatten her up for Xmas.

lol....

I really dont' know her..or any of these girls for that matter. These were
just
images given to me to play around with.

I don't mind scrolling down, but I wanted to eliminate the sideways scrolling.

I'm thinking that people with small screen should still be able to see the
site pretty well....you think?

How would you design/place the background image?

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

In article <7d244e2097795@uwe>,
"LayneMitch via WebmasterKB.com" <u39402@uwe> wrote:

dorayme wrote:

O and by the way, have you an address for the undernourished girl
on the page? I have some nice potatoes here that I would like to
send her. I feel all motherly towards her and would like to
fatten her up for Xmas.


lol....

I really dont' know her..or any of these girls for that matter. These were
just
images given to me to play around with.

I don't mind scrolling down, but I wanted to eliminate the sideways scrolling.

I'm thinking that people with small screen should still be able to see the
site pretty well....you think?

How would you design/place the background image?

Beauregard is right. There is no question of where to place this.
You can't design like this!

Look what happens when you Ctrl +:

The undernourished girl goes into the black. Perhaps she is
searching for food?

Plus the girl at top on the right in the designer jeans and white
jacket is going to fall off...

Honestly, I cannot conceive of a fix for all this.

Have you gone over some of the material at:

http://www.htmldog.com/guides/

?

Generally follow the advice there except use HTML 4.01 Strict as
your doctype and adjust accordingly.

Make a background and fancy look to your page the *very last
thing* you do, not the first.

--
dorayme

Beauregard T. Shagnasty wrote:

Or with Firefox and the Web Developer Toolbar installed:
Miscellaneous > Small Screen Rendering

Your page is useless, I'm afraid...

Okay....I just installed Web Developer Toolbar and hit Misc > Small Screen
Rendering...

What does this mean?

How can I fix this if it matters?

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

In article <7d24dc7a4e102@uwe>,
"LayneMitch via WebmasterKB.com" <u39402@uwe> wrote:

Beauregard T. Shagnasty wrote:

Or with Firefox and the Web Developer Toolbar installed:
Miscellaneous > Small Screen Rendering

Your page is useless, I'm afraid...



Okay....I just installed Web Developer Toolbar and hit Misc > Small Screen
Rendering...

What does this mean?

How can I fix this if it matters?

Apart from any fancy device to help you see what other users are
seeing, you can use your own eyes and fingers. Just alter your
own browser width and use the text-size controls to see what
happens. Just remember that not everyone is seeing things at the
text and window sizes you are seeing.

--
dorayme

dorayme wrote:

Apart from any fancy device to help you see what other users are
seeing, you can use your own eyes and fingers. Just alter your
own browser width and use the text-size controls to see what
happens. Just remember that not everyone is seeing things at the
text and window sizes you are seeing.

Okay...

I see what you're saying.

Even though I'm new...my problem isn't with positioning...(anymore)

My problem is knowing how to properly display a background or how to display
a background image that I've designed in Photoshop. This is where advice
would greatly help.

I just experimented with resizing everything.

I got rid of all of my images and text and had just the blue rectangular
background. And I tried resizing by hitting Ctrl +... and nothing happened.
I'm thinking that this is what's effecting my entire design - the
unflexibility of my background.

Basically....how do you design a background graphic in photoshop and display
it properly as a background in CSS so resizing won't be a problem?

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

"LayneMitch via WebmasterKB.com" <u39402@uwe> wrote

My problem is knowing how to properly display a background or how to
display
a background image that I've designed in Photoshop. This is where advice
would greatly help.

A background should be exactly that, a background. Something that covers the
canvas and over which you place your content.

You don't have a background. You have a big blue box containing some
"content" (the words on that image). That "content", apart from the fact
that it should be text, and not a picture of text, should be real content,
not part of something that is assigned as a background.

As soon as you start putting your "content" in a background image you are
forced to try and position your other content in relation to that "content".
This invaribly fails.

One major reason it fails is that by default background images do not print
(to save ink) so any "content" in the background image will not print.

Another major reason it fails (in this case) is that the google bot does not
read "content" in images. That "content" is invisible to google.


By the way the picture of the pretty girl is way too big. If you use some
proper image manipulation software you could compress it from the 163K it is
now down to something like 20K. Same with the other images. The entire page
is almost 300K. Way too big for what it is.

Oh, and *don't* use letter-spacing to space those two mirror images.

--
Richard.

rf wrote:

You don't have a background. You have a big blue box containing some
"content" (the words on that image). That "content", apart from the fact
that it should be text, and not a picture of text, should be real content,
not part of something that is assigned as a background.

So what would be the best method to produce a blue box and have it a part of
a background? Should I even specify it as an image?

By the way the picture of the pretty girl is way too big. If you use some
proper image manipulation software you could compress it from the 163K it is
now down to something like 20K. Same with the other images. The entire page
is almost 300K. Way too big for what it is.

Still working on the optimization.

Oh, and *don't* use letter-spacing to space those two mirror images.

Understood...just thought it would be witty.

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

"LayneMitch via WebmasterKB.com" <u39402@uwe> wrote

rf wrote:
You don't have a background. You have a big blue box containing some
"content" (the words on that image).

So what would be the best method to produce a blue box and have it a part
of
a background? Should I even specify it as an image?

body {background-color: blue;} ?

By the way the picture of the pretty girl is way too big. If you use some
proper image manipulation software you could compress it from the 163K it
is
now down to something like 20K. Same with the other images. The entire
page
is almost 300K. Way too big for what it is.


Still working on the optimization.

You don't need to "work" on it :-)

Open picture.
Set compression level to, say, 50%.
Save picture.

--
Richard.