CSS: 2 Images for background?

G

Geoff Schultz

I'll preface this by stating that I'm a newbie when it comes to CSS files.
My web site has hundreds of photo album web pages created by an application
named Arles which reference a single CSS file.

What I want to do is to have a repeating background and in the upper right
hand corner I want to place another image. The problem is that the the
HTML generated by Arles only contains table entries. I don't see how to
add the image in the upper right hand corner given this structure.

Here's a link to a very simple page containing just 2 photos but shows the
HTML structure:

http://www.geoffschultz.org/2004_Sailing/Maps/index.html

Any suggestions on how to do this would be greatly appreciated.

-- Geoff
 
B

brucie

In alt.html Geoff Schultz said:
What I want to do is to have a repeating background

my little head doesn't understand. you already have a repeating
background doesn't the software let you change it?
and in the upper right hand corner I want to place another image.

in the css file:

#my-image{top:10px;left:10px;position:absolute;}

and just below the <body>:

<img ... id="my-image">

that will place the image 10px out from the left of the window and 10px
down.

do you have permission from the copyright holder to use their images or
are they PD?
 
G

Geoff Schultz

In alt.html Geoff Schultz said:


my little head doesn't understand. you already have a repeating
background doesn't the software let you change it?

Yes, it does. The key point of this statement was in the next line.
in the css file:

#my-image{top:10px;left:10px;position:absolute;}

and just below the <body>:

<img ... id="my-image">

that will place the image 10px out from the left of the window and 10px
down.

Thanks for that info. The problem is that this will require
regenerating/modifying all of the all of the html files.

-- Geoff
 
B

brucie

In alt.html Geoff Schultz said:
Yes, it does. The key point of this statement was in the next line.

why bother mentioning it at all? all you had to ask was how to stick in
an image in the top corner.

thats all you had to say. you're just messin with my head. you're in
league with the little voices! aahhhhhhaaaaaaaaa!

and i just noticed you said "right" not left. so change the left:10px;
to right:10px;

my poor little head <sob/> wheres my crack pipe.
 
E

Els

Geoff said:
....
Thanks for that info. The problem is that this will
require regenerating/modifying all of the all of the html
files.

If you have a container div inside the body but full width, you
could set one background to the body element, and the other to
that container div.
 
G

Geoff Schultz

In alt.html Geoff Schultz said:



why bother mentioning it at all? all you had to ask was how to stick in
an image in the top corner.

Because if all that I wanted to do was stick an image in the upper right
corner I could have done that with the background. Since I have a
repeating background, that's not possible.

What I was really wanted to do was to achieve this without modifying every
html file in all of my albums. I didn't think that was possible, and I
suspect that even more now.

-- Geoff
 
T

Toby Inkster

Geoff said:
What I want to do is to have a repeating background and in the upper right
hand corner I want to place another image.

html {
background: blue url("sea.jpeg") repeat scroll top left;
}
body {
background: transparent url("boat.jpeg") no-repeat scroll top right;
}
 
G

Geoff Schultz

html {
background: blue url("sea.jpeg") repeat scroll top left;
}
body {
background: transparent url("boat.jpeg") no-repeat scroll top
right;
}

This is getting closer. With this I get a blue background (the "sea.jpeg"
in this example doesn't become the repeating background pattern), but I do
get the "boat.jpeg" image in the upper right corner.

-- Geoff
 
T

Toby Inkster

Geoff said:
This is getting closer. With this I get a blue background (the "sea.jpeg"
in this example doesn't become the repeating background pattern),

In which browser are you testing? Some Geckos have trouble overlaying
backgrounds.

I've put up an example here:
http://examples.tobyinkster.co.uk/two-background/example

Works in Opera/7.53 (Linux), IE/6.0 (Windows) and Firefox/0.9.1 (Windows),
but not in Netscape/7.1 (Windows) -- see what I mean about Geckos being
tempremental?
 
G

Geoff Schultz

In which browser are you testing? Some Geckos have trouble overlaying
backgrounds.

I've put up an example here:
http://examples.tobyinkster.co.uk/two-background/example

Works in Opera/7.53 (Linux), IE/6.0 (Windows) and Firefox/0.9.1
(Windows), but not in Netscape/7.1 (Windows) -- see what I mean about
Geckos being tempremental?


The problem was that my DOCTYPE tag didn't have
"http://www.w3.org/TR/html4/strict.dtd" in it. It simply read
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">. When I added the above
to it, it worked! I don't understand what this did, but it fixed it!
Thanks!

-- Geoff

P.S. This is on MSIE 6.0
 
B

brucie

In alt.html Geoff Schultz said:
The problem was that my DOCTYPE tag didn't have
"http://www.w3.org/TR/html4/strict.dtd" in it. It simply read
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">. When I added the above
to it, it worked! I don't understand what this did, but it fixed it!

Activating the Right Layout Mode
http://www.hut.fi/u/hsivonen/doctype.html

Doctypes and their respective layout mode
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

microsoft:
http://msdn.microsoft.com/workshop/author/css/overview/cssenhancements.asp
mozilla:
http://www.mozilla.org/docs/web-developer/quirks/doctypes.html
opera:
http://www.opera.com/docs/specs/doctype/
 
G

Geoff Schultz

The problem was that my DOCTYPE tag didn't have
"http://www.w3.org/TR/html4/strict.dtd" in it. It simply read
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">. When I added the
above
to it, it worked! I don't understand what this did, but it fixed it!
Thanks!

-- Geoff


I guess that I'm really stupid with this, but I have a new problem.
Everything worked fine with the CSS code inline. When I moved it to a
CSS file I'm back to the behavior that I had before adding
"http://www.w3.org/TR/html4/strict.dtd" to my DOCTYPE line. I see the
image in the righthand corner but the repeating background image doesn't
appear. Do I need to add something to the CSS file or the HTML file?

Here's a copy of the CSS file:

html {
background: grey url("../arlesimages/Map.jpg") repeat scroll top left;
}

body {
background: transparent url("../arlesimages/Compass_Rose.gif") no-
repeat scroll top right;
}

-- Geoff
 
M

Mitja

I guess that I'm really stupid with this, but I have a
new problem. Everything worked fine with the CSS code
inline. When I moved it to a CSS file I'm back to the
behavior that I had before adding
"http://www.w3.org/TR/html4/strict.dtd" to my DOCTYPE
line.

There should be no reason for that.... Make sure you reference the right files - the paths have to be relative to that of the css
file, not html referencing the css. But then again, if you see the upper right image, this shouldn't be the problem.

Maybe you just made some stupid little mistake or another while separating html and css. Try to do it once again - for me,
everything works fine in IE6 when I separate them in Toby's example.
 
G

Geoff Schultz

There should be no reason for that.... Make sure you reference the
right files - the paths have to be relative to that of the css file,
not html referencing the css. But then again, if you see the upper
right image, this shouldn't be the problem.

Maybe you just made some stupid little mistake or another while
separating html and css. Try to do it once again - for me, everything
works fine in IE6 when I separate them in Toby's example.

As I stated, it probably was something stupid that I did. I had
regenerated the HTML files from Arles and simply added
"http://www.w3.org/TR/html4/strict.dtd" to the DOCTYPE line. What I missed
was that the Arles generated DOCTYPE read:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and I had to delete the "Transitional" from it.

Sorry for my stupidity, but thanks for the help.

-- Geoff
 
M

Mitja

Sorry for my stupidity, but thanks for the help.
Don't apologise for stupidity, it's stupid ;)
These things happen to everyone.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top