Thema: Templates soll sich an Bildschirmauflösung anpassen

Ich habe jetzt schon einiges dazu gelesen, aber nichts hat mich wirklich weitergebracht.
Auf meiner HP www.solarenergie-ruhr.de, erscheint immer ein horizontaler scrollbalken.
Nach rechts hin ist das Hintergrundbild nicht mehr vorhanden. wähle ich kleinere Auflösungen ( 1024 X 768 ) haut es auch das Template durcheinander.
Habe eine schöne Lösung gefunden, die so aussieht:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
und die man sich hier hier:
http://css-tricks.com/examples/ImageToBackgroundImage/
anschauen kann.
Ich habe aber noch nicht rausgekriegt wo ich das einbinden müßte.

Für Tips wäre ich sehr dankbar.

Danke für die schnelle Antwort.

Ich habe das Template "Explorer-Sports" als Basis genommen.
Dort habe ich in der Template.css nur Verweise bzw. Importe, was dann so aussieht:

@import url(reset.css);
@import url(layout.css);
@import url(typography.css);
@import url(menus.css);
@import url(modules.css);
@import url(joomla.css);
@import url(extensions.css);

Habe es in der layout.css eingetragen. Das hat aber nichts verändert.