| Autor |
Nachricht |
yoyoyoy
Threadersteller
Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 03.12.2010 23:14
Titel bild zuerst auf 100% höhe skalieren, danach repeat-x |
  |
|
hi,
hoffe, der titel ist aussagekräftig, sonst versuche ich mein problem nochmal genauer zu umschreiben.
ich möchte ein hintergrundbild anlegen und auf der x-achse als hintergrund eines divs wiederholen (die seite besteht eigentlich nur daraus). das bild soll sich nun den jeweiligen auflösungen anpassen, daher muss - so meine überlegung - zuerst die höhe auf 100% gebracht werden, danach die breite des divs (mit dem repeat-x) auf 100%.
hier mal mein grundgerüst:
| Code: |
<html>
<head>
<style type ="text/css">
* {
padding:0;
margin:0;
}
#bakground{
background: url('background_repeat.gif') top left repeat-x;
padding:0px;
width:100%;
}
img{
top:0px;
left:0px;
height:100%;
}
</style>
</head>
<body>
<div id="background">
<img src="background_repeat.gif" />
</div>
</body> |
das bild selbst wird beim ziehen des browserfensters skaliert...nicht jedoch der gerenderte hintergrund: die bilder haben eine bestimmte höhe, von der ich keine ahnung hab, wie sie zustande kommt...
jemand ne idee, wo der fehler liegt?
grüße und schönes we,
yo
|
|
| |
  |
 |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.12.2010 11:22
Titel
|
|
|
Hi yoyoyoyo,
schwierig, da via css background-images ja (noch) nicht
skalierbar sind. Da müsstest Du in Deiner Konstruktion
mglw. hergehen und das Background-Bild mehrmals nacheinander
einbauen und via overflow:hidden und no-wrap ein repeat
simulieren. Beispiel: http://zweitaccount.zw.ohost.de/bg_xscale/
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hintergrund X Scalieren</title>
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
white-space:nowrap;
}
#background img {
height:100%;
}
</style>
</head>
<body>
<div id="background">
<img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" /><img src="bg-image.jpg" alt="" />
</div>
</body>
</html>
|
Wichtig bei den Images ist, dass die ohne Whitespace
nacheinander gebracht werden.
Grüße
zweitaccount
|
|
| |
|
|
|
Anzeige
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht: 
|
Verfasst Sa 04.12.2010 11:28
Titel
|
|
|
|
Du könntest es mit CSS3 (oder hier) machen und als Fallback für alte Browser ne JS-Lösung - die sollte man tonnenweise im Netz finden können.
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
|
| |
|
|
yoyoyoy
Threadersteller
Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 05.12.2010 01:30
Titel
|
|
|
hi leute,
leider hab ich keine e-mail-benachrichtigung bekommen - daher sorry für mein verspätetes reply und erstmal danke für eure tipps! werde das morgen mal antesten und dann berichten...
grüße,
yo
|
|
| |
|
|
naturalshirts
Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 54
Geschlecht: 
|
Verfasst So 05.12.2010 10:17
Titel
|
|
|
| yoyoyoy hat geschrieben: | }
#bakground{
background: url('background_repeat.gif') top left repeat-x;
padding:0px;
width:100%;
}
yo |
Bei deinem div #background fehlt ein "c". Das kann auch Fehler verursachen.
|
|
| |
 |
|
yoyoyoy
Threadersteller
Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 05.12.2010 16:29
Titel
|
|
|
hi,
also habe jetzt beide lösungen ausprobiert...beide funktionieren. Die von Karlarsch gepostete
---> http://www.htmlite.com/faq022.php
versucht ja, ein bild über den gesamten bildschirm zu verteilen, das beispiel von zweitaccount
---> http://zweitaccount.zw.ohost.de/bg_xscale/
kommt meinem ursprünglichen anliegen näher, bilder wagerecht zu wiederholen, an den bildschirm anzupassen und
allerdings kann man die erste lösung leicht dahingehend abwandeln. trotzdem hat mir zweitaccounts vorschlag beim testen mit diversen ie's besser gefallen, weil sie keine hacks braucht und - zumindest bei meinem test - bis 5.0 funktioniert. da hatte der zweite workaround probleme (muss dazu sagen: benutze zwei überlagernde divs mit transparenten gifs zuoberst).
entscheidend beim ganzen ist white-space:nowrap, wie zweitaccount schon richtig sagte...deshalb vielen dank nochmal an dich, aber natürlich auch die anderen!
schönen sonntag,
yo
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bild skalieren, Höhe vorgegeben, Breite proportional
background-repeat:no-repeat funktioniert nicht.
[CSS] Div 100% Höhe und BG-Bild - Problem
Anordnung von Bild auf rechter Seite auf ca. 3/4 der Höhe!
Photoshop: Bild skalieren?
[flash] hintergrund bild/mc skalieren
|
|
Willkommen auf dem Portal für Mediengestalter
