Joomla background image

A real newbie question here.
I cant find documentation anywhereto tell me how to paste a background image in a joomla content item, or section.
When I use the edit css button, and select the file I want, it shows on my screen until I click the save button. then the image doesnt appear on my site and its not there when I go back to edit the content item again.
Please steer me to a good reference as the joomla documentation doesnt say anything about embedding html.

Please forgive me for being a bit confused about exactly what you are trying to do. It would help me to know what to suggest if I had a better understanding of exactly what you are trying to do.

For example:

These are two very different things and how you would accomplish using a background image (I assume you mean a “static” image over which the “text” is written) would have to be accomplished in two very different ways. For one thing, a Joomla! “section” is only a classification mechanism and is not “content” in and of itself so you cannot use a traditional “background image” declaration with it (some significant template tweaking with CSS and custom classes would be involved). A Joomla! “content item” on the other hand is actually only a database row containing the “content” to be displayed in the appropriate place in the template and you might could put a background image inside a div within the content to accomplish that (though not with the WYSIWYG editor, and it can’t be done by “pasting”).

Are you talking about the “Edit CSS” link in the Site -> Template Manager -> Edit Css menu structure, where you are taken to the template’s CSS file to edit? I’m sorry, but while I am very familiar with Joomla!, can’t visualize what you are doing and/or what you are trying to accomplish. In this case, given the terminology and the complexity of Joomla!, it would help a lot if you would detail the keystroke that got you to where you are doing this “editing”. For instance, “After logging in to the backend/admin section of Joomla!, as an administrator/user/whatever, I select All Content Items, click the link for the item I want to edit, and am presented with a WYSIWIG editing screen (telling me which editor you are using would help). Then I …”, etc.

Without a better understanding of what you are trying to do, and how, it is hard to point you in the right direction - it depends a lot on what you are tying to “embed” HTML in, and where you are trying to do it.

Joomla! does a very good job of “protecting you from yourself” when it comes to the separation of “style” and “content” and exactly how/where to make certain changes is not necessarily trivial to sort out (and in many cases, that is a “Good Thing™”).

For instance, without disabling the WYSYWIG editor when entering content, some HTML you might enter (even using the “html” entry mode of the editor) will not be saved (the editor will “protect you from yourself” and refuse to save/rewrite it!).

Maybe if you provide a relevant link to your site (the page/link you are trying to modify), and indicate in the post what you are trying to change about that page, and how you are trying to change it, I’d have a better idea of how to offer useful help. :wink:


Like I said I’m a real newbie.
at - (I coulndt make the search friendly url’s work either, but its the photo’s link off the main menu) you can see I have some html code ( pictures with links to other pages) but if I try to put a background image ( editing the content item and using the html button) on that page it disappears, and if I try to put in a script like google adsense it doesnt stay either.
Like I said, I am new to joomla.
Should I break down and buy Dreamweaver, or what is the standard out there? Is there an open-source program close to equivalent to dreamweaver.
Thanks again for helping a newbie. This is an experimental site, so I can learn what I am doing.

That is correct, and the WYSIWYG editor is designed to do exactly that, even when using the “html button”.

You can insert code (html/scripts/etc.) in a couple of ways, however:

  1. In the Joomla! administrator, Go to the User Manager and “edit” your user to set the WYSIWYG editor to “none”. Then you will be presented with a “plain old” textarea entry field when editing the item, and you can insert your stuff and it will be save (even if your code might “break” your page or is invalid html, etc.).

  2. You can search for, select, and install a component/module (extension) that is designed to facilitate the entry of code into certain WYSIWYG editors. These have been written by others for the purposes of facilitating a 'workaround" for this problem, though they are generally designed for making entry easy for certain tyhpes of content (embedding videos, for example).

Frankly, if you know enough html to be doing this, you don’t need the WYSIWYG editor anyway, so I think choice one is the “best” for this purpose, and more versatile (though it does make you totally responsible for the code you enter).

So, back to your original question, you can insert a “background image” into your content item by disabling the WYSIWYG editor, editing your item, and using a

to “wrap” the displayed “content” area of the page (the whole “page” is determined by the template/styles in use by your site), and adding the appropriate “background image” information there. Of course you can also use that method to “inline style” the content further - though the responsibility for doing this “well” is now yours, and such custom styling may not always be appropriate should you change you site’s theme, etc.)

The result will be that the actual “content” section of the page will show the newly “styled” content.

If you are not thoroughly familiar with how styling a div works, you might benefit from reviewing Lissa Explains it All – A div layer tutorial, and adjust according to your needs. :wink:

Note that you do not likely want to position the dive for use withing Joomla! content, so you do probably don’t need the positioning information, or even the size information (though, then again you may, depending upon what you are trying to do.)

An example of adding a background to a content item in this manner might be:

This is a test

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This sets a yellow background color for the div, and background image.

An example of this “live” can be seen (for a little while :wink: ) at this link. (it’s just a “sandbox” site for now; I put an example up for you to see, but it probably won’t remain there for long :wink: ).

Whether or not you want to invest in DreamWeaver is a matter of personal choice and preference; you certianly do not need it to write “standard” html. The “standard” is “valid code” according to the W3C - WYSIWYG program, in general, have varying degrees of success approaching that. For those time when you just want to use a WYSIWYG editor, the Open Source NVU is a good choice, but nothing beats well-formed, valid, hand-written code (use a good programmers editor, and “roll your own”).