CSS Hintergrundbild skalieren

fruchtzwerg1989 · 1. Dezember 2009

Hallo, ich habe Joomla installiert und verwende ein fertiges template.

Nun habe ich dort ein Hintergrundbild, das sollte jeder User ganz sehen.
Das Problem ist wenn ich es in einer Auflösung von 800 x 600 einsetze wird es bei größeren Auflösungen mehrmals aneinander gesetzt, oder ist zu klein.
Wenn ich es in z.b. 1280 x xxx mache wird bei User die 800 x 600 als Auflösung verwenden
nur teilweise angezeigt.

Mein Problem ist das ich nicht so wirklich weiß wie ich es lösen soll das es automatisch an die Bildschirmauflösung des Users angepasst wird.
Bin leider auch nur im Besitz von sehr geringen html/css Kentnisse!

Hoffe einer von euch kann mir da helfen, und mir das Idiotensicher erklären!

mfg

thecrazykaktus · 1. Dezember 2009

Hi also dazu soltest dich schon etwas mir Joomla auseinander setzen. Den so schnell is das nicht erklärt! Aber kannst es schön bei Galileo Press nachlesen wie man mit Templates in Joomla arbeitet.

Hier mal der Link zu den Openbooks die kannst dir Kostenlos herunterladen oder auch Online anschauen.

http://www.galileocomputing.de/katalog/openbook/?GalileoSession=93818723A4-xqQpRd8w

fruchtzwerg1989 · 1. Dezember 2009

Naja Joomla an und für sich ist mir bekannt. Nur kann ich keinen Code schreiben!

ICh weiß schon wo ich die css und html datein des Templates finde.
Bräuchte nur jemanden der mir erklärt welchen Code ich einfügen muss...
Da ich mir noch nicht ganz sicher bin ob das über css zu realisieren ist oder ob man da eher was in die html einfügen muss!

Stefan- · 1. Dezember 2009

Das ist absolut nichts Joomla!-spezifisches. CSS kann, zumindest in der Implementierung der meisten Browser, bisher noch keine Hintergrund-Skalierung.

Es gibt aber ein paar Umwege, mit denen man sowas doch realisieren kann:

http://css-tricks.com/how-to-resizeable-background-image/
http://www.markschenk.com/cssexp/background/index.html

fruchtzwerg1989 · 1. Dezember 2009

hm ok das ist genau das was ich gesucht habe. Mein leider schlechtes Englisch sagt mir jetzt das ich den code

Code:

<head>
	....
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("img.source-image").hide();
		var $source = $("img.source-image").attr("src");
		$('#page-body').css({
			'backgroundImage': 'url(' + $source +')',
			'backgroundRepeat': 'no-repeat',
			'backgroundPosition': 'top center'
		});
	});
	</script>
</head>
<body id="page-body">
	<img class="source-image" src="images/image.jpg" alt="" />
</body>

in die html datei des templates einfügen muss... und das wars?

Suche

CSS Hintergrundbild skalieren

fruchtzwerg1989

Lt. Junior Grade

thecrazykaktus

Lt. Junior Grade

fruchtzwerg1989

Lt. Junior Grade

Stefan-

Lt. Commander

fruchtzwerg1989

Lt. Junior Grade

Ähnliche Themen