Hintergrundbild "nur" unten fixieren

[Zoe_Furrer]

Guten Abend liebe Menschen

Ich habe eine Frage; wie kann ich es erreichen, im CSS mein Hintergrund einer Website bloss *unten*, also vertikal, auf der Seite zu fixieren und es sich gleichzeitig horizontal 100%-ig an die Bildschirmgrösse anpassen lassen? Ist das überhaupt möglich?

Liebe Grüse

Zoe

 

[midgard18]

Was ist denn dieses "bloss *unten*", ein eigenständiger Container?
Evtl. HTML-Code mitliefern ...

 

[Zoe_Furrer]

alos hier wirkt alles im CSS auf das Hintergrundbild: bloss;

/*XM*/
body {
background: url(../images/backgrounds/body_bg_default.png);

background-attachment:fixed bottom bottom;
/*background-position:0% 0%;*/
background-size: 100%;
background-repeat: no-repeat;

background-color: #6389a8;
}

funktioniert so gar nicht

 

[midgard18]

mit background-attachment bestimmst du nur das Verhalten wenn Inhalte oder Elemente bewegt werden. Dort ist also nur fixed anzugeben, nicht die Position.

 

[_schatzi_]

Hallo,

meinst du so?

html, body{
  height:100%;
  }
  body{
  background: url(../images/backgrounds/body_bg_default.png) no-repeat bottom;
  background-size: contain;
  }

 

[Zoe_Furrer]

jou, und eben; wenn ich es nur unten fixieren will, nicht überall? Hab das da er-googelt;
http://www.designerinaction.de/tipps-tricks/web/hintergrundbild-ausrichten-und-fixieren-mit-css/

offenbar ist es also erlaubt, das Bild bloss an bestimmten Stellen zu fixieren? aber ich vermute, nur unten funktioniert nicht, denn entweder ist ein Bild fixiert oder nicht...(?)

Hmmm, wie soll ich das bloss lösen? Wenn ich das ganze Bild fixiere, verschwinden immer einige Bildelemente (ein Ballon) auf einigen Geräten und Bildschirmen auf der rechten Seite...wenn ich es gar nicht fixiere, lässt das Bild unten einen Rand, der nicht schön aussieht...und wenn ich beides auf 100% Bildschirmgrösse einstelle, verzerrt es das Bild, seufz :/

Joa, wie macht man sowas?

 

[midgard18]

Kannst Du einen Link senden?

"wenn ich es gar nicht fixiere, lässt das Bild unten einen Rand, der nicht schön aussieht"
Hier kannst Du mit negativer Positionierung z.B. -20px arbeiten.

Die Fixierung des Bildes wenn es den unteren Bildschirmrand erreicht wäre mittels JS möglich. Du kannst z.B. de Viewport auslesen und beim erreichen die entsprechende CSS Anweisung laden lassen ...

 

[Zoe_Furrer]

hihi, nein, Schatzi, deine Methode erzeugt bloss einen komplett weissen Hintergrund Pardon, einen halbweissen, hab vergessen html zu schreiben

Hier der Link zu der Seite:

JS tönt interessant, ich bin bloss leider eine ziemliche Anfängerin und habe keine Ahnung, was ein Viewport ist; wonach muss ich suchen und in welchen Dateien? Das Template ist ziemlich gross und komplex, da ich es irgendwo im Internet gefunden habe...JS habe ich Null Ahnung und hätte Freude, wenn du mir dabei helfen könntest

 

[midgard18]

ok, wie es aussieht handelt es sich um ein joomla-template. Ich vermute, dass es in den Template-Dateien keine vorgefertigte Funktion zum Auslesen des Viewport gibt. Da Du, wie Du selbst schreibst, nicht der JS-Profi bist hier ein Link zur Einarbeitung ;-)
https://wiki.selfhtml.org/wiki/JavaScript

Wenn Du aber eine schnelle Lösung benötigst, warum machst Du es nicht so:
- Hintergrundbild oben ausrichten
- Bild mit mit einem Verlauf zu transparent nach unten auslaufen lassen
- zum Bild passende Hintergundfarbe/-verlauf

 

[Zoe_Furrer]

jou, schnell Java Script lernen, lol hättest du vielleicht einen Link, der die Funktionsweise von Viewports erklärt? Hab nix schlaues gefunden....

hmmm, dann lasse ich, bis ich das verstehe, das Hintergrundbild fixiert...ich könnte auch einen Scrollbalken von links nach rechts erzwingen, wenn die Leute dann scrollen, können sie das ganze Bild sehen die Idee des Verlaufs gefällt mir nicht besonders...

Tut mir leid, ich dachte, die Problemlösung sei eine einfache Anweisung im CSS...

 

[Zoe_Furrer]

Lol, Joomla ist doch genial da gibt es tatsächlich ein Plugin für Viewports: http://www.joomla-specialist.net/joomla-extensions/joomla-simple-mobile-detection.html

Für alle, die dasselbe Problem hatten und auch mit Joomla arbeiten danke dir, Midgard18, dass du mich darauf gebracht hast, dass man solch verschiedene Einstellungen der Geräte Viewport nennt...ich glaub, mit diesem PlugIn könnte es klappen

allerdings löst es noch nicht das Problem für kleinere PC-Bildschirme oder absichtlich verkleinerte Browserfenster, welche viele User haben, die zum Beispiel TOR nutzen...Um Scrollbalken anzeigen zu lassen, sobald das Hintergrundbild (teilweise) verschwindet, müsste ich das ganze Hintergrundbild in einen Container legen...seufz, wie und wo mach ich das bloss, im CSS oder im Html...? Manchmal herrscht Verwirrung...

Guäts Nächtle

 

[Zoe_Furrer]

Hab versucht, das im html zu schreiben, um ein Hintergrundbild in ein div zu legen: warum das wohl nicht funktioniert? Hahaaa, hab ja nix besseres zu tun...ich glaub, das html des joomla-templates ist bloss Dekoration, dort stand nur eine Hintergrundfarbe....es gibt etwa 5 verschiedene css und eines davon ist sooooo unverständlich :/ seufz...auch nützt die JavaScript Methode nix, denn sie fixiert das Bild dann auch und die Bildelemente rechts verschwinden ebenfalls...

<html>
<head>
<style type="text/css">

div.bg {
width:920px; height:700px;
overflow: auto;
background-color: #6389a8;
background: url(../images/backgrounds/body_bg_default.png);
background-attachment:fixed;
/*background-position:0% 0%;*/
/*background-size: 100%;*/
background-repeat: no-repeat;
}

</style>
</head>
<body>

<div class="bg">
</div>

</body>
</html>

 

[midgard18]

Hallo Zoe,

leider habe ich wenig Zeit, um Dir noch ein paar Tipps und Tricks zu schreiben. Zum Thema responsive images findest Du hier die grundlegenden Infos und Fallbeispiele ...

http://responsiveimag.es

https://responsiveimages.org/

 

[Zoe_Furrer]

Daaaaaaaaanke aber weisst du, ich lass es so, wie es ist, ich will ja nicht für jedes Handy ein einzelnes Template machen...zudem gibt es offenbar für Handy auch eine Desktopversion. Und wer wirklich an der Site interessiert ist, wird vermutlich auch über den Rechner sie anschauen Bin kein Profi, muss ich halt so zufrieden sein

 

[midgard18]

"... ich will ja nicht für jedes Handy ein einzelnes Template machen ..."

genau um dies nicht machen zu müssen, wird RWD via Viewport entwickelt