mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 19.11.2017 20:58 Benutzername: Passwort: Auto-Login

Thema: bild zuerst auf 100% höhe skalieren, danach repeat-x vom 03.12.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> bild zuerst auf 100% höhe skalieren, danach repeat-x
Autor Nachricht
yoyoyoy
Threadersteller

Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 03.12.2010 22:14
Titel

bild zuerst auf 100% höhe skalieren, danach repeat-x

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 04.12.2010 10:22
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 33
Geschlecht: Männlich
Verfasst Sa 04.12.2010 10:28
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 51
Geschlecht: Männlich
Verfasst Sa 04.12.2010 11:05
Titel

Antworten mit Zitat Zum Seitenanfang

Das hier wäre die gängigste Lösung:
http://www.htmlite.com/faq022.php

Gruß
Karl
  View user's profile Private Nachricht senden
yoyoyoy
Threadersteller

Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 05.12.2010 00:30
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
naturalshirts

Dabei seit: 15.06.2009
Ort: Potsdam
Alter: 48
Geschlecht: Weiblich
Verfasst So 05.12.2010 09:17
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
yoyoyoy
Threadersteller

Dabei seit: 29.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 05.12.2010 15:29
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen Bild skalieren, Höhe vorgegeben, Breite proportional
[CSS] Div 100% Höhe und BG-Bild - Problem
[Flash] Full Browser Flash - Bild auf 100% skalieren
Tabelle Höhe 100%
[Dreamweaver MX] Tabelle 100% Höhe
Problem mit 100% höhe in safari
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.