<IMG> tag - foreground jpeg repeat

[Lale]

Good people:

I am new, so please be gentle. The format of the forum is a little confusing but I'll get used to it.

Before anything else, I want to thank in advance for any and all help.

Here is my problem: I want one jpg image to repeat horizantally. I read whatever comes up in google under "image repeat" to achieve this very simple task. I am ashamed to say I haven't been successful yet.

Normally, I display my images like this:

<P CLASS="certain-class-defined-in-my-css-file"><IMG alt="Nice Picture" src="nicepicture.jpg" border=0 width="200" height="100"></p>

Yes, I use a style sheet (<LINK REL="STYLESHEET" HREF="lotsoffonts.css" TYPE="text/css">)

Now, I tried all sorts of definitions in my css file using background-repeat option (which I never trusted since what I want to repeat is not a background image). I also experimented with various definitions in an inline style block (<style> ol { background-image: nicepicture.jpg; background-repeat: repeat-x; } </style>) etc.

I know I am missing some idiotic detail somewhere. Could you please tell me simply and clearly (speak slowly) what to put in my css file or in an inline style block AND THEN how to activate that definition in my HTML file.

Thank you! (My expertise is literature, so if I can be of any assistance to you regarding the world classics or contemporary literary-fiction, please let me know. I will trade book analysis for HTML help )

Lale
readliterature.com

[Lale]

I guess I had to post that under general coding or css help or something. My apologies for putting it in the wrong place. Like I said, I will have to get used to the format of the forum.

Lale

[boogyman]

Okay you are very close and you are on right track. You do not have to do any extra code to "activate" some css outside of your linked stylesheet.

if you would like to link in your stylesheet at the top in the header section you would put your

<link type="text/css" rel="stylesheet" href="blah.css" />

Then you would just make sure that you put the appropriate tags in the HTML structuring, which it looks like you know how to do. I have a feeling that where you are getting into trouble is calling the image that you want repeated. If you want to do it inline then you need to put the

<img href="blah.jpg" width="bah" height="bah" style="background-repeat:repeat-x" />

but if you would prefer to have it in your linked style sheet then you would need to make sure that you either have an ID or a CLASS somewhere you can reference it. In your example you would call it like so in your linked stylesheet

.certain-class-defined-in-my-css-file img {background-repeat:repeat-x;}

[b]NOTE: "class" is supposed the designer wants to use the codes multiple times on one page. if this is the only place on your page that you want your background image, you should use an "id" which the only thing that would change in your code is replacing the DOT with a POUND(#) sign . I hope this helps you and if not you can give me a shout on my messengers if you have any of them. Good Luck

[mwinter]

Here is my problem: I want one jpg image to repeat horizantally.

Foreground images cannot be repeated, however background images can.

I also experimented with various definitions in an inline style block (<style> ol { background-image: nicepicture.jpg; background-repeat: repeat-x; } </style>) etc.

The value of the background-image property must either be none or a URI. The latter is denoted by the url functional syntax: url(uri). Moreover, if one specifies a background image for a particular element, such a declaration should always be accompanied by an appropriate background colour such that if the image is not displayed (either due to network problems, or other such considerations), the foreground content will be visible. Finally, a color declaration should be paired with a background declaration, rather than assuming that the default colour is sufficient.

ol {
  background: #colour url(uri) repeat-x;
  color: #colour;
}

I know I am missing some idiotic detail somewhere. Could you please tell me simply and clearly (speak slowly) what to put in my css file or in an inline style block AND THEN how to activate that definition in my HTML file.

Include the above (or rather a derivative thereof) as you would any other style rule. Your post suggests that you know how to do that, but don't hesitate to ask if you have problems.

Hope that helps,
Mike

[Lale]

Dear Pissa and MWinter,

Thank you so much. Works like a charm.

In my ".css" file, I put (exactly as Mike suggested)

P.repeatimage {
background: #FCF2E2 url(http://readliterature.com/ulku-logo-mod2.jpg) repeat-x;
color: #FCF2E2;
}

and then I call repeat image thus:

<P CLASS="repeatimage"><IMG alt="..." src="ulku-logo-mod2.jpg" border=0 width="593" height="70"></p>

and it works. I am very grateful.

However, I still couldn't get it to work by an inline style definition. I put this in the code:

<style>

ol {
background: #FCF2E2 url(http://readliterature/ulku-logo-mod2.jpg) repeat-x;
color: #FCF2E2;
}

</style>

But then what do I do with "ol", is it a class I invoke in my <p> or is it a style name, or is there something wrong with the syntax?

It would be nice to get this latter to work because for every image I want to repeat, I don't want to hard code the uri into the css file. It would be so much tidier to define and use within the respective htm file.

Mike: background colour info was very useful, thank you.
Pissa: thank you very much for the note on class vs id.

You people are great. I wish I knew something you didn't. Does anyone need a book report on Anna Karenina?

Lale
readliterature.com

[blm126]

ol is a tag. It stands for ordered list. very similiar to "<ul>"

[mburt]

Generally you put <li>s in <ul> tags. Well, at least I think you do..

[Lale]

What is with the "student", "teacher", "prof" titles? Does the forum assign these automatically?

Mine suits me well, since I am building up my HTML skills bit by bit and I am here to learn. I just don't want the participants to think that I am young (as most students are). Maybe mine should read "adult student", or "eternal student".

re: <ol>

I took that example from an HTML tutorial, I thought it was just a programmer-defined symbol, such as my ".repeatimage", I didn't know it was a reserved symbol.

Lale

[mwinter]

P.repeatimage {
background: #FCF2E2 url(http://readliterature.com/ulku-logo-mod2.jpg) repeat-x;
color: #FCF2E2;
}

A background colour identical to the foreground?

By the way, it's a good idea to choose presentation-neutral class names. They should represent a concept, rather than a particular implementation of it. This way, if you decide to alter the presentation later, the class name remains relevant.

and then I call repeat image thus:

<P CLASS="repeatimage"><IMG alt="..." src="ulku-logo-mod2.jpg" border=0 width="593" height="70"></p>

Why include the same image as an inline element when it'll be rendered through the CSS declaration?

<style>

The style element requires a type attribute:

<style type="text/css">

But then what do I do with "ol", is it a class I invoke in my <p> or is it a style name, or is there something wrong with the syntax?

OK, I thought you knew more about CSS. Sorry. The introductory sections of the CSS Specification (up to, and including, chapter six) describe the major syntactic and conceptual features of the CSS language. Of those, chapters three and six might be a little hard to digest, but the rest should be fairly readable. Later chapters describe the rendering model and properties, and are quite technical. We'll be happy to help you with any questions you might have regarding any part of it, though.

To jump straight to the current issue, the "ol" forms the selector. Elements within the document that match the selector are rendered according to the declarations within the rule. In this specific instance, "ol" would match all ordered lists (ol elements). The other selector - p.repeatimage - would match all paragraphs (p elements) that have a class attribute containing the word 'repeatimage' (class attribute values are a space-separated list of words). If that's what you want, replace "ol" with "p.repeatimage".

Selectors rely heavily on the structure of a document, which is why writing good markup is so important. Whilst they are very powerful, this relationship with structure makes it difficult for someone to suggest the most appropriate selector to use unless they can see things for themselves.

You people are great. I wish I knew something you didn't. Does anyone need a book report on Anna Karenina?

Heh. Sorry, no.

What is with the "student", "teacher", "prof" titles? Does the forum assign these automatically?

Yes. They're based entirely upon post count.

Mike