Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Hintergrundbild "nur" unten fixieren“

Zoe_Furrer

Noch nicht viel geschrieben

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
 

Zoe_Furrer

Noch nicht viel geschrieben

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 :D
 

midgard18

Nicht mehr ganz neu hier

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

_schatzi_

KI ist spannend (und gefährlich)

Hallo,

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

Zoe_Furrer

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

hihi, nein, Schatzi, deine Methode erzeugt bloss einen komplett weissen Hintergrund :D 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 :)
 
Zuletzt bearbeitet:

midgard18

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

jou, schnell Java Script lernen, lol :D 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

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:

Zoe_Furrer

Noch nicht viel geschrieben

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>
 
Zuletzt bearbeitet:

Zoe_Furrer

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

"... 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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben