Using CSS

[peebs]

I am just starting to look into CSS.
I have used a css sheet to add a fixed background image to the related .HTL
using
background fixed, no-repeat etc.
I now want to add another graphic on top of the existing background image
and locate it fixed at the bottom right corner.
I thought that I could simply call a second background image and locate it
in the bottom LH corner but it doesn't work - I simply get either the full
screen background image OR the small logo image in the bottom corner
depending on the order in the CSS. I want these two images to feature on all
pages of the site and I thought that I could do it with CSS. I ca nmake it
work putting the full screen background image in the CSS and the bottom
corner logo in each .HTM page but I was hoping to simplify things.
Any advice will be greatly appeciated.
Thank,--
peebs

 

[Murray]

but it doesn't work

You cannot have two background images on the same element.

I ca nmake it
work putting the full screen background image in the CSS and the bottom
corner logo in each .HTM page

What?

Why not post a link to the page so I can see what you are trying to do?

 

[peebs]

Thanks for the quick reply Murray.
I gathered that there was a problems trying to put 2 b/g images on one page!!
I can't link you because it is not published yet.
What i have done is to put the full screen background image - no-repeat,
fixed in the CSS and put a fixed logo (one of DD's static logo scripts) in
the HTM page.
This works fine but I was trying to put a fixed logo in the CSS file so that
I had it all in one place as, like the background image, it appears on each
page. I thought also that I could get around using a script.
I may not be making much sense - but as i said, i am new to CSS and FP for
that matter!!
In short, I want a full screen JPG image in the background with a animated
..GIF image fixed (non scroll) in the lower rh corner. I want this arrangement
to appear on each page along with the data specific to each page.
Best regards,

 

[Murray]

What i have done is to put the full screen background image - no-repeat,

fixed in the CSS and put a fixed logo (one of DD's static logo scripts) in
the HTM page.

Hmm - this doesn't make much sense. What page element is carrying the full
screen background image? And what does full screen mean, anyhow? The CSS
rules can only express themselves by affecting something on the HTML page.

I may not be making much sense

In short, I want a full screen JPG image in the background with a animated
.GIF image fixed (non scroll) in the lower rh corner.

Full screen images are scary because they are so heavy. Must you eat up the
bulk of your page weight budget in a single image? You are shooting for a
total weight of only 40-45K - that includes all images, and all code.

Anyhow, if you could upload your page somewhere and post a link to it, I'd
be able to give you specific suggestions....

 

[Kevin Spencer]

Hi peebs,

This could be done, I believe, by using the background image as the
background image, and the fixed logo image using CSS to position it.
Example:

<img src="chutney(large).gif" style="position: absolute; right: 0; bottom:
0">

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Murray]

Don't let anything underflow it, though....

How about combining the two images?

 

[peebs]

Hi Kevin,
Many thanks for your reply. I too think that your idea should work but I
can't seem to get it right. Where exactly do you put it?
Murrey - I can't combine the two images because the logo image is also a link.

 

[Kevin Spencer]

The problem with combining the 2 images is that the background image is of a
fixed size, but the browser window is not.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[peebs]

Hi Kevin,
My earlier post may be misleading. I can put your idea in the .htm page and
it works oK but i was trying to get everything into one place in a CSS so
that any changes could be more easily controlled. Putting the full screen b/g
image into the CSS and the logo image into the .htm is what I am doing at the
moment - I just wanted to combine the processes.
Many thanks,

 

[Kevin Spencer]

Hi peebs,

The problem here is that the CSS can only refer to something that already
exists in the page. The page itself is an HTML document, represented by the
region between the <body> and </body> tags in the page. You are applying a
style to that document. To apply a style to anything, it must be *in* the
page. Perhaps you could use a Dynamic Web Template with the image in it, and
apply that to all of your pages.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[peebs]

Thanks Kevin,
As I said, I am new to CSS and obviously have a lot to learn. I will look
into DWTs to see if that will do the trick.

 

[Murray]

It won't.

Kevin has his finger on the problem.

To make something reliably sit in the bottom right hand corner, it must be a
background image - then you can use CSS to style it with
background-position:bottom right. That'll work fine.

The problem is that other background image. Since you have already used up
the page background image, anything else will be ON TOP of it.

OK - so you could make the big image the page background image and then put
a table on the page with the logo as the background in the bottom right -
but that's no good since you cannot force the table to fill the height of
the browser viewport *and* render the page in standards mode. In my
opinion, losing the latter is a great tragedy, and not worth the benefit of
the former.

So - I would be inclined to rethink this layout plan. How about you?

 

[peebs]

Hi Murrey,
I want to keep the layout so I think that I will forget trying to put the
logo image in the CSS. I can make it work by adding

"background-image:url(images/PA_backgroundWM.JPG);
background-repeat: no-repeat;
background-attachment: fixed;"

in the CSS and using a script for the logo image in each htm page. That
works fine - I just thought that i could clean it up a bit if i could find a
way to put it all in the CSS.
I thought that I could do away with using a long script by using

"<img src="images/Menu_image_anim2.gif" style="position: absolute; right: 8;
bottom: -26; width:149px; height:131px">"

in the .htm page. Although it put the image in the lower left corner it
wasn't fixed and scrolled. I also could not get a link attached to it so it
is back to my original ideas - unless you have any other ideas ...........
Regards,

 

[Murray]

in the CSS and using a script for the logo image in each htm page.

How does that work?

"<img src="images/Menu_image_anim2.gif" style="position: absolute; right: 8;
bottom: -26; width:149px; height:131px">"

This might work, but it will scroll with the page, as you said. There would
be no reason why you couldn't attach a link to it, however.

 

[peebs]

I don't know how but it does work!!
I can't seem to get a link onto the logo using the <img scr= etc. Put it
down to my lack of experience!!!

 

[Murray]

I don't know how but it does work!!

Show me the code, and I'll tell you how it works.

 

[Kevin Spencer]

It should be on the right of the page, sticking down past the bottom by 26
pixels, and it should remain there.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Kevin Spencer]

Show us the HTML you have so far, with anything extra in the page removed
for clarity.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Kevin Spencer]

Hey, that's what *I* said.After YOU!!

;-P

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[peebs]

OK Guys,
This is what I have in the htm page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BIBLIOTHÈQUE DE LA PIERRE ANGULAIRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" TYPE="text/css" HREF="new_page_1.css">

</head>

<body>
<img src="images/Menu_image_anim2.gif" style="position: absolute; right: 8;
bottom:
-26; width:149px; height:131px">

</body>

</html>


This is what I have in the CSS

body
{
background-image:url(images/PA_backgroundWM.JPG);
background-repeat: no-repeat;
background-attachment: fixed;


}

I have cleaned out the other parts of both files for clarity.
If I run the htm page I get my background image full screen no scroll and I
get my logo image initially in the lower right corner BUT it scrolls with the
page AND I don't seem able to get a link on it. In my original design
clicking on the logo image brought up a window with the site navigation menu.
Many thanks for your interest,