#1

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo,

ich habe diverse animierte GIF-Dateien, die ich als Hintergrund auf unserer Website evtl. einsetzen will. Als Hintergrund kann ich jedoch nur Farben auswählen.

Wie kann ich den Hintergrund der Seite mit den animierten GIFs ändern?

Ich verwende Bootstrap v3.


Gruß

DiDu

#2

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo,

Hintergrund der Seite grundsätzlich nicht nur mit Farbe, sondern auch mit einem Bild einsetzen?

Nicht nur mit dem von mir verwendeten Design Bootstrap, sondern auch bei anderen Designs
nicht möglich!?

Wenn ich kein Flex Design verwenden möchte.

Wie wäre dies möglich?

Gruß

DiDu

#3

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Welche animierten GIFs eignen sich denn für einen allgemeinen Website-Hintergrund? Da ich bezweifle, daß es solche gibt - kannst Du bitte mal zwei/drei Beispiele solcher animierten GIFs posten? Danach sehen wir weiter...


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#4

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Das mit animiert habe ich ad acta gelegt.

Grundsätzlich geht es mir darum, dass ich als Hintergrund immer nur eine Farbe auswählen kann. (Ausnahme ganz wenige Designs, Flex)
Es gibt jedoch nicht die Möglichkeit auch ein Bild (z.B. Rauhfasertapete) als Hintergrund einzusetzen.

Wie könnte man dies realisieren?

Beste Grüße
DiDu

#5

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#6

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo Volker,

vielen Dank 🙂

und beste Grüße, gesund bleiben!!
DiDu

#7

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Dies einfach unter Datei -> Website-Eigenschaften -> HTML -> Im <head>-Bereich eintragen, ggf. mit noch weiteren CSS-Befehlen verfeinern/optimieren und gut ist.

Weitere Befehle und Möglichkeiten zu der Angelegenheit findest Du bspw. HIER.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#8

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Nochmals Danke!

Werde versuchen das mit dem Pfad hinzukriegen.
Bin halt Laie. Sind manchmal halt "Böhmische Dörfer".

Beste Grüße
DiDu

#9

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo,

wahrscheinlich mache ich was falsch mit dem Pfad,

sieht so aus

<style>

body {

background-image: url("https://www.infodubau.de/pictures/w7e1816142300000a8763b1804268112/higru.png");

}

</style>

funktioniert so leider nicht.
Was mache ich falsch?

Gruß

DiDu

#10

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Nun ja, das Bild

https://infodubau.de/pictures/w7e1816142300000a8763b1804268112/higru.png

existiert schlicht und ergreifend nicht. Die URL führt ins Leere (Fehler 404).


Wie lautet die tatsächliche URL (festzustellen über ein FTP-Programm)?


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#11

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#12

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Habe es so eingefügt. Leider ohne Erfolg.

Aber: ich verwende hier als Design Bootstrap v3-Dubau(responsiv), also ein "besonderes Design".

Habe dann einfach div. andere Designs ausprobiert...und siehe da...es funktioniert...

aber nicht bei allen Designs. Bei manchen funktioniert es, bei manchen nicht.

Für Deine Bemühungen, vielen Dank.

Beste Grüße, gesund bleiben
DiDu

#13

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Packe mal ein !important dahinter.

<style>
  body {
    background-image: url("https://infodubau.de/images/pictures/w7e1816142300000a8763b1804268112/higru.png") !important;
  }
</style>

Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#14

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Aber: ich verwende hier als Design Bootstrap v3-Dubau(responsiv), also ein "besonderes Design".

Design Bootstrap v3 ist doch ein Design von Thomas?

Ich kenne zwar das Design nicht aber was ich hier in den letzten Jahren in alle Berichte hier im Forum gelesen habe ist das einfügen von ein Hintergrundbild STANDARD in Thomas Designs eingepflegt.

Am besten fragst du Thomas danach.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#15

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

hallo Volker...

funktioniert trotzdem leider auch nur bei vielen, aber nicht allen Designs
eben auch nicht bei Bootstrapv3

Desweiteren....

habe auch in Bootstrap nichts gefunden wie ich ein Hintergrundbild einfügen kann.
Habe auch Herrn Karow schon direkt angeschrieben. Vielleicht bekomme ich ja noch eine Antwort.?

Habe zusätzlich mich auch mal bei Siquando danach erkundigt. Erhielt hier die Antwort, dass das einfügen
von Hintergrundbildern nicht üblich wäre und es deshalb auch nicht vorgesehen ist. Auch nicht im neuen Pro5. Basta!

Denke die Auswahl Farbe/Bild sollte man jedoch dem Kunden überlassen. Dies in einem Programm zu installieren
ist sicherlich kein grosser Aufwand. 

Naja...es isch wias isch!

Für die Bemühungen vielen Dank!

Beste Grüße
DiDu

#16

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Stimmt, Siquando hat mir auch so eine "lapidare" Antwort gesendet. Sie sollten es doch den Einzelnen überlassen, welchen Hintergrund er nutzen möchte.
 
Zur ProVersion: Flexdesign responsiv kannst du ein Hintergrundbild einfügen. Das habe ich was gefunden.
 
Bootstrap: Kenne ich nur die "normale" Version. Da kannst du jederzeit ein Hintergrundbild einfügen. Würde mich wundern, wenn Thomas diese jetzt geändert hätte.
 
Schau am besten noch mal richtig in Ruhe nach.
 
PS: Du redest im übrigen immer von einem "animierten gif" als Hintergrundbild. Ich glaube das mit Bordmitteln geht nicht.
 
Schönen Tag noch und bleibt gesund.

Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#17

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Das mit "animiert" hat sich erledigt.

Habe mit dem mir von Volker geschriebenem:

<style> body { background-image: url("https://domain/images/pictures/w7e1816142300000a8763b1804268112/higru.png") !important; } </style>

festgestellt, dass bei manchen Designs ein Hintergrundbild damit eingefügt werden kann. Mit Bootstrapv3 nicht.
Habe Bootstrap nur als Version v3. Darin finde ich nichts, womit ich ein Hintergrundbild einfügen könnte.
 

Beste Grüße
DiDU

#18

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Das ist alles eine Sache von gewissenhafter Recherche, CSS-Kenntnissen und der in den entsprechenden Stylesheets vorliegenden Prio-Rangfolgen.

Im Bootstrap Design kommst Du mit folgenden Befehlen zu einem wunschgemäßen Ergebnis:

<style>
    div {
        background-color: transparent !important;
    }

    body {
        background-image: url("https://infodubau.de/images/pictures/w7e1816142300000a8763b1804268112/higru.png");
    }
</style>


Das Ergebnis ist schlicht und ergreifend Geschmacksache.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#19

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Ja, wenn ich alles transparent haben will.

Eigentlich sollte ja nur der Hintergrund mit Bild gestaltet werden.
Der Inhalt sollte jedoch weiter in schwarz sein.

Beste Grüße
DIDu

#20

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

DiDu, ein animiertes Hintergrundbild? Bitte nicht.

Die Antwort zu deiner Frage findest du übrigens (seit der Veröffentlichung des Layouts) unter https://siquando-designs.de/info/probs3/


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#21

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#22

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

#23

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

#24

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo Thomas,

https://siquando-designs.de/info/probsv3/

wenn man sich mit irgendwelchen Programmiersprachen auskennt.....dann sicherlich kein Problem...
wenn jedoch dies Voraussetzung sein muss, dann bitte Mitteilung!

wie schon per Mail geschrieben....bitte um Antwort betreffend Support

skalierendes, flächendeckendes und fixiertes Hintergrundbild

In diesem Beispiel wird das in Bilder importierte Hintergrundbild "background-full.jpg", falls notwendig skaliert.

 ??????????????????????????????????????

@media (min-width: 768px) {
 body#body {
  background: url(/images/pictures/background-full.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
 }
}

Viele Grüße
DiDu

#25

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Warum packst Du den von Thomas aufgeführten CSS-Code nicht einfach in ein <style>...</style>, ersetzt die URL darin durch die Deinige und kopierst das Ergebnis im Client nach Datei -> Website-Eigenschaften -> HTML -> Im <head>-Bereich?

<style>
    @media (min-width: 768px) {
        body#body {
            background: url(https://infodubau.de/images/pictures/w7e1816142300000a8763b1804268112/higru.png) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    }
</style>

Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#26

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo Volker,

habe den von Thomas aufgeführten Code verwendet. Leider ohne Erfolg.

Auch auf der angegebenen Seite habe ich dies gefunden:

skalierendes, flächendeckendes und fixiertes Hintergrundbild

In diesem Beispiel wird das in Bilder importierte Hintergrundbild "background-full.jpg", falls notwendig skaliert.

 

@media (min-width: 768px) {
 body#body {
  background: url(/images/pictures/background-full.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
 }
}

von einem <style>...</style> ist da keine Rede. Jetzt ist mir das auch klar. Und der, der so etwas schreibt als koryphäe, für den ist das sicherlich erst recht klar und auch evtl. somit verständlich.
Das meinte ich eben mit "Laie" ohne Ahnung von einer Programmiersprache.

Werde dies mal so ausprobieren, wenn ich von meinem Arztbesuch zurück bin.

Für Deine Bemühungen vielen Dank und
beste Grüße
DiDu

#27

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Hallo,

habe den von Thomas genannten Code eingefügt.

<style> @media (min-width: 768px) { body#body { background: url(https://infodubau.de/images/pictures/w7e1816142300000a8763b1804268112/higru.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } </style>

Leider ohne Erfolg.

Wenn ich den von Dir genannten Code verwende,

<style> div { background-color: transparent !important; } body { background-image: url("https://infodubau.de/images/pictures/w7e1816142300000a8763b1804268112/higru.png"); } </style>

funktioniert es. Allerdings komplett transparent. siehe https://infodubau.de
Der Inhaltsbereich Hintergrund sollte jedoch in schwarz erhalten bleiben und der Hintergrund der Seite nur links/rechts sichtbar sein.

Viele Grüße
DiDu

#28

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

DiDu, sorry wenn ich ehrlich bin und nicht böse sein. Nimm diesen Augenkrebs-Hintergrund lieber komplett raus.

Und wenn Du ihn doch gezielt so belassen möchtest, mußt Du Dir für die Inhaltsboxen einen schwarzen Hintergrund via CSS konfigurieren (lassen). Am besten wendest Du Dich in der Angelegenheit direkt an Thomas.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#29

Di Du

Forum-Sponsor  (214 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.dubaufamilie.de

Volker,

vielen Dank für Eure Bemühungen.

Werde meinem Freund versuchen dies nahe zu bringen.

Werde trotzdem nochmals bei Thomas nachfragen, ob es möglich ist für das gewünschte via CSS dies zu konfigurieren.

Hoffe ich erhalte eine Antwort.

Beste Grüße
DiDu 🙂

1220 Aufrufe | 29 Beiträge