Header Backgrounds - How can it be done?

Header Backgrounds - How can it be done?

by W Page -
Number of replies: 4

Hello All!

I am trying to create a background on which a logo with a transparent backing would be placed on.  Problem is, I cannot figure out how to do it with all this new CSS stuff in the Moodle v1.5 themes.  I could really use some help with this.

For example, please see the image below.  The words "MyMoodle" would be the logo on a transparent background so the main header background [with the weird objects] could be seen except for the area the words in the logo cover.

Is there anyway to accomplish this?

Thanks in advance for any and all advice about this.

WP1

Attachment mymoodle_example_01.jpg
Average of ratings: -
In reply to W Page

Re: Header Backgrounds - How can it be done?

by David Scotson -

Is the text "MyMoodle" a logotype (i.e. an image) or is it just the text in a standard web font?

If so then just use an <h1> tag with the 'shapes' set as a background-image (this is just a slight variation on the technique used by most themes to change the header backgrounds on the sideblocks)

If you need an actual image of the MyMoodle text then limitations in Internet Explorer mean the image of the text would need to be a GIF with a transparent background and therefore, unless the difference in shade between the text and the background was quite subtle, you'd end up with quite a blocky effect.

The question in my mind is why you don't just create a single image? Does the text need to change dynamically?

Average of ratings: -
In reply to David Scotson

Re: Header Backgrounds - How can it be done?

by W Page -

Hi David S!

Dumbo (me) forgot to save the image in the above post in GIF format instead of JPG which is causing some confusion.

Yes "MyMoodle" is an example of a logo with a transparent background and should have been in GIF format with a background in GIF format.

I would like to be able to change the background of the header occasionally and not the logo.  Would a single image still be better for doing this?

Also, how can I make sure the background image (or maybe just one combined image [logo + background]) extends across the screen no matter what the screen resolution is.  Is there a certain image size or type of coding that should be used.

Thanks for your help with this David.

WP1

Average of ratings: -
In reply to W Page

Re: Header Backgrounds - How can it be done?

by N Hansen -
You can get an idea about how to do this by looking at my header in this thread (http://moodle.org/mod/forum/discuss.php?d=25702). In my main header, I have three parts, with the one in the middle being repeated as many times as necessary to fill in the space. In the other pages, it just has two parts, with the right hand one repeated as many times as necessary. If you go to my main page, and resize your browser window, you can see the effect.
Average of ratings: -
In reply to N Hansen

Re: Header Backgrounds - How can it be done?

by W Page -

Hi N!

I think I am just going to change the background a bit so it is repetitive across and then place a transparent logo.

Thanks for your help.

WP1

Average of ratings: -