Images with external CSS

[abrie]

Can I put my banner on top of every page of my site using external CSS? If yes, whats the code for that? I've tried using background-image:url(....); . THat didn't work though. Why not?

[galbus]

Personally I think you're better off using PHP to do this. Never heard of doing it with CSS but this is really simple. Rename your selected file .php (instead of .htm/.html) and insert this code to the space allocated for the banner (e.g. within <TD></TD> tags):

<?php include ("header.html") ?>
(This command replaces this section of PHP code with HTML code found within the specified file.)

Then create "header.html" and type something like this:

<a href="http://www.wherever.com/"><img src="images/banner.gif" border="0"></a>

Then you can change the banner by simply changing the values of "header.html".

I'm assuming that your host has PHP support, of course. (I'm assuming HM is your host :D)

[abrie]

I learnt how to do it with css from w3schools.com :

<style type="text/css">
body
{
background-image:url(http://www.kneesbent.hostmatrix.org/images/kneesBent_banner2.jpg);
background-repeat:no-repeat;
background-position:top;
margin-top:182px;
}


You insert it as a background picture like I tried before, set it as a no-repeat, postion it at the top, and then my own little trick: You set the page margin from the top to more than the pictures height. THat way your text and other content won't go over your banner!.
Thank you for your php idea, Galbus, I dont know php yet, but thanks for the help in any case.

[galbus]

Glad you got it sorted abrie,

Was the point of this to determine a way of rotating banners without having to modify the HTML code every time?

If so you should maybe try the PHP method. To place the banner at the top of the screen you would simply enclose the <?php ... ?> within

</P> tags at the start of you body as so:

<P align="center"><?php include ("header.html") ?></P>

It's just that with the CSS method you can change the image but you can't seem to change the link (Or you haven't mentioned how to). Are the images clickable?

Could you supply me with a link to the page so that I can see how it works? I'm intrigued as to how it looks. :D

[chilipie]

http://www.alistapart.com/articles/betterrotator/

PHP image rotator - tried it before, and it works brilliantly. Can have a different link for each picture, and deals with different sized images.

[abrie]

PHP image rotator - tried it before, and it works brilliantly.

That rotator does look pretty impressive, but I'm staying away from php for now until i have css down. ;)

It's just that with the CSS method you can change the image but you can't seem to change the link (Or you haven't mentioned how to). Are the images clickable?

Could you supply me with a link to the page so that I can see how it works? I'm intrigued as to how it looks.

Hey that's a good point. I actually wanted my header to be a link back to my home page...
I just read that you can't do hyperlinks with css. mmm. What a pickle. :o

I think I'm gonna have to learn php sooner than i think :lol:

Oh and the link to my site is ---><--- (http://www.kneesbent.hostmatrix.org/home.html) . THis is to my home page. Its not much and only the 'links' link is alive. I used a table for this page, but this (http://www.kneesbent.hostmatrix.org/external%20css%20example.html) is the page I used the css on. I only did the text in HTML.

There you go galbus, please tell me what you think... :lol: