Background Positioning

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

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?

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="background: 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

In article <NCGbj.27254$CN4.6415 (AT) news-server (DOT) bigpond.net.au>,
"rf" <rf (AT) invalid (DOT) 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/bac...less_bytes.jpg

--
dorayme

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

Actually, it didnt' work very well.

When I resize the text on my page the page starts to break up. I'm using a
combination of absolute and relative positioning which I've been told is okay
to do.

Also when I resize the images, the background still remains at a fixed size.
Still trying to find a solution to this.

I've been told that the correct way to display a background is by:

body {background:#fff url(images/picture.jpg) no-repeat center center}

This info is coming from guys who are good at design. So I still don't
understand why it's not working for me.

You can click on this link to see the updates thus far.

www.ibtestsite.info

--
Message posted via http://www.webmasterkb.com

Oh yeah...

How is this guy (http://portfolio.dreamshock.com/grimshaws/) getting his
background's displayed/positioned properly or designed without using
Photoshop? His background is resizing nicely with all of his text and images
resizing proportionately as well.

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

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

Actually, it didnt' work very well.

When I resize the text on my page the page starts to break up. I'm using a
combination of absolute and relative positioning which I've been told is okay
to do.

Also when I resize the images, the background still remains at a fixed size.
Still trying to find a solution to this.

I've been told that the correct way to display a background is by:

body {background:#fff url(images/picture.jpg) no-repeat center center}

This info is coming from guys who are good at design. So I still don't
understand why it's not working for me.

You can click on this link to see the updates thus far.

www.ibtestsite.info

Please quote what you are referring to. Many cannot see what any
of the context is at all. Not everyone uses Google Groups,
especially in this ng.

Please try harder to say what it is you actually want as a final
result. What should and should not happen.

At the moment it simply looks like you are vaguely dissatisfied
at undernourished girls wandering out of blue areas, vaguely not
understanding what a background is, not understanding how an html
rectangle might grow or not grow and so on.

Is it the blue area that you want to grow along with the text
size increases so that everything and everyone stays indoors and
not go into the frightening black nothingness?

There is a general rule about this stuff. If you are at the
beginner stage in these matters, don't even think of using any
positioning, especially not absolute positioning.

Earlier in the thread you said:

"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 displaya background image that I've designed in Photoshop.
This is where advice would greatly help."

But you are displaying a background image. It does display! So
what are you wanting? You are needing to ditch all the
positioning, to say what you want to happen, to rub more and
better words together.

--
dorayme

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

Oh yeah...

How is this guy (http://portfolio.dreamshock.com/grimshaws/) getting his
background's displayed/positioned properly or designed without using
Photoshop? His background is resizing nicely with all of his text and images
resizing proportionately as well.

Are you seeing what everyone else can see? There is no resizing
of any background image because there are no bg images. Turn off
all the styles and you will still see the images.

<td rowspan="4"> <a href="Grimshaws_Vauxhall_Flash.html"><img
src="images/frontsplash_07.jpg" border="0" height="179"
width="205"></a></td>

is just normal images in the html. This one is in a link and in
tables, that's all.

Have you tried following the advice I gave you earlier at all:

"[no] fix for all this.
[go] 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

dorayme wrote:

Are you seeing what everyone else can see? There is no resizing
of any background image because there are no bg images. Turn off
all the styles and you will still see the images.

I turned off all of the styles and I saw the images. I hit view source and I
saw that he does specify a bg image:

<body bgcolor="#FFFFFF" text="#000000" background="images/pagebackground.gif"
leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Have you tried following the advice I gave you earlier at all:

"[no] fix for all this.
[go] 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."

Thanks again. I will visit the site and review the html/css rules...actually
before I do anything else with design.

Thanks for your expertise.

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

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

dorayme wrote:

Are you seeing what everyone else can see? There is no resizing
of any background image because there are no bg images. Turn off
all the styles and you will still see the images.

I turned off all of the styles and I saw the images. I hit view source and I
saw that he does specify a bg image:

body bgcolor="#FFFFFF" text="#000000" background="images/pagebackground.gif"
leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

You said to look at:

http://portfolio.dreamshock.com/grimshaws/

I went to it and in the source it says:

<BODY BGCOLOR=#FFFFFF>

not

<body bgcolor="#FFFFFF" text="#000000"
background="images/pagebackground.gif"
leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

In this site's css it has the following bullshit:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
scrollbar-face-color:#4B4B4B;
scrollbar-highlight-color:#D4D4D4;
scrollbar-3dlight-color:#373737;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#808080;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#E0E0E0;
}

There is no bg image there either.

Got to rush now and wrap more presents and stuff and get ready to
get blind rotten drunk, to disgrace myself more than for the rest
of the year combined and like that... Merry Xmas mate!

--
dorayme