Background Positioning

[LayneMitch]

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?

[dorayme]

Re: Background Positioning

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

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

[Beauregard T. Shagnasty]

Re: Background Positioning

dorayme wrote:

"LayneMitch " <u39402@uwewrot e:

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

Layne, look at your site with Opera and press Shift-F11.

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

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

--
-bts
-Friends don't let friends drive Vista

[LayneMitch via WebmasterKB.com]

Re: Background Positioning

Beauregard T. Shagnasty wrote:

>Or with Firefox and the Web Developer Toolbar installed:
>Miscellaneou s 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

[dorayme]

Re: Background Positioning

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

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

[LayneMitch via WebmasterKB.com]

Re: Background Positioning

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....ho w 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

[Beauregard T. Shagnasty]

Re: Background Positioning

LayneMitch via WebmasterKB.com wrote:

Beauregard T. Shagnasty wrote:

>>Or with Firefox and the Web Developer Toolbar installed:
>>Miscellaneo us 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?

It means your page is useless for anyone using small-screen browsers
(mobile phones, PDAs), or where CSS is not available. People on slow
connections who disable image loading don't see anything at all.

The page also looks pretty silly on my 1680x1050 widescreen with
maximized browser window (though I personally rarely do that).

How can I fix this if it matters?

Start over? Get some content (you don't have any), properly mark it up,
then worry about design and layout last.

Try this browser, too: http://offbyone.com/

--
-bts
-Motorcycles defy gravity; cars just suck

[rf]

Re: Background Positioning


"LayneMitch via WebmasterKB.com " <u39402@uwewrot e in message
news:7d2529a6f6 e05@uwe...

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.

[Beauregard T. Shagnasty]

Re: Background Positioning

LayneMitch via WebmasterKB.com wrote:

And I tried resizing by hitting Ctrl +... and nothing happened.

Nothing happened because you have no text, only images. (I assume the
Ctrl+ was in Firefox; that just resizes text.)

--
-bts
-Motorcycles defy gravity; cars just suck

[LayneMitch via WebmasterKB.com]

Re: Background Positioning

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...ju st thought it would be witty.

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

[rf]

Re: Background Positioning


"LayneMitch via WebmasterKB.com " <u39402@uwewrot e in message
news:7d25e3bb85 240@uwe...

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.

[dorayme]

Re: Background Positioning

In article <7d2529a6f6e05@ uwe>,
"LayneMitch via WebmasterKB.com " <u39402@uwewrot e:

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....ho w do you design a background graphic in photoshop and display
it properly as a background in CSS so resizing won't be a problem?

Well, my point about Ctrl + was simply to see what happened in
your previous design. I described what happened.

However, you need some text or inline images before "something
happens" Why with inline images but no actual text? Well, I guess
because they are in a line that *could* share text. The text
could be big or small depending. The invisible line blocks are
sized according to the biggest of any inline objects. The browser
just makes provision. If the text size is 100%, then pictures
that are taller than such normal text will make the line box
taller. But at some enlargement of the text (or potential text)
the line box will be taller than the pics.

The text size is sized according to what the author says it
should normally be or as it is overridden by the user wanting it
bigger or smaller.

You can see for yourself. Get rid of all your images bar one in
the previous url you provided. Put:

<div class="linkbkgd " style="backgrou nd: white;">
<img src="images/Link-Background.gif" alt="">
</div>

And watch the action. The space under the image is for the
descenders in text.

As for displaying bg images, that is simple enough. Read the
htmldog link I gave. Read what rf says.

You may be thinking you can stretch a bg image or make it grow
with the growth in an element (as happens in text size
adjustments). But you can't. You can give an illusion by having a
bg repeat itself, or you can have one so big that some of it
(though not all) will practically fill the element.

--
dorayme

[dorayme]

Re: Background Positioning

In article <NCGbj.27254$CN 4.6415@news-server.bigpond. net.au>,
"rf" <rf@invalid.com wrote:

Still working on the optimization.

>
You don't need to "work" on it :-)
>
Open picture.
Set compression level to, say, 50%.
Save picture.

Perhaps he meant other things by optimization besides byte
juggling. Lie making the text bigger or getting rid of it.

But in case OP does mean byte reduction, you do not quite need to
go down to 50%. Here it is at 80% jpged and under 10KB:

http://netweaver.com.au/alt/pics/background_less_bytes.jpg

--
dorayme

[LayneMitch via WebmasterKB.com]

Re: Background Positioning

rf wrote:

>body {background-color: blue;} ?

The background color is already specified as black. I'm looking for a blue
image inside of a black image and all of it is considered a background.

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

Dorayme is right...I am talking about bytes. But anyhow I'll get every image
fixed to make for a faster download.

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

[LayneMitch via WebmasterKB.com]

Re: Background Positioning

rf wrote:

>>>You don't have a background. You have a big blue box containing some

Okay...


Can anyone explain to me why this worked...?

<html>
<head>
<style type="text/css">

body {
background-repeat: no-repeat;
background-position: 180px;
}

</style>
</head>

<body bgcolor="#00000 0" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0 " background="ima ges/Background.gif" >

</body>
</html>

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1