• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Hintergrundbild wird manchmal nicht angezeigt

K

Kaz

Neues Mitglied
Guten Tag zusammen,

ich habe ein Problem mit meinem Code und kann den Fehler nicht finden, weshalb ich hier sehr auf Unterstützung hoffe.

In einem Forum wird das Hintergrundbild angezeigt, in einem anderen nicht. Es bezieht sich hier auf den Code im CSS:

*/ .rbackout {width: 500px; background: url('
https://imgur.com/S3ZZlFH
') no-repeat center center; padding: 30px; display: flex; justify-content: center; } /*

Außerdem zerschießt es mir ein wenig das Forum, in dem das Hintergrundbild nicht angezeigt wird. Es verschieben sich dadurch z. B. ein paar Buttons.

Der Code:
Code: 
</font></style><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gentium+Plus&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/5da3a31511.js" crossorigin="anonymous"></script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><style type="text/css"> /*
 
*/ #risingshadowskaz { --width: 500px; --divider-width: 35%; --invert-divider: .1; --padding: 50px; --bg-color: #E3E3E3; --position: relative; --font-style: 13px/180% 'Gentium Book Plus', serif; --margin: 30px 0;} /*
 
*/ .rback {  box-sizing: border-box; width: var(--width); background: var(--bg-color); padding: 40px; color: var(--text-color); font: var(--font-style); } /*
 
  */ .rborder {border-color: #E3E3E3; border-style: solid; border-width: 3px; padding: 3px; }/*
 
  */ .rbackout {width: 500px; background: url('https://i.imgur.com/S3ZZlFH.jpg') no-repeat center center; padding: 30px;  display: flex;   justify-content: center; } /*
 
*/ .rbacksmall {  width: 500px; height: 175px; box-sizing: border-box; background-repeat: no-repeat; background-position: center center; padding-top: 150px; } /*
 
/*
========================
      TEXT
========================
*/.rtitle { margin: 10px 0; font: 900 70px/100% 'Playfair Display', serif; } /*
 
*/ .rsublittle { text-transform: lowercase; font: 10px/100% 'Times', serif; letter-spacing: 3px; } /*
 
*/ .rsub { text-transform: lowercase; font: italic 12px/100% 'Times', serif; letter-spacing: 3px; } /*
 
*/ .rsubgross {  text-transform: none; font: italic 12px/100% 'Times', serif; letter-spacing: 2px; } /*
 
*/ .rtext { font-family: 'ABeeZee', sans-serif; text-align: justify; font-size: 12px; line-height: 20px; color: #444444; } /* 

*/ .rdivider {   margin: 20px 0; width: var(--divider-width); filter: invert(var(--invert-divider)); } /* 
 
/*
========================
     Kasten
========================
*/.rkasten { background: #000000; width: 640px; width:100%; padding: 15px; margin: 0px 0px 10px 0px; text-align: center; color: #E3E3E3; font: 900 10px/100% 'Playfair Display', serif;  text-transform: uppercase; box-sizing: border-box; letter-spacing:2px;} /*<br />
*/.rlink {font: 900 11px/100% 'Playfair Display', serif !important; color: #E3E3E3 !important; letter-spacing:2px !important;}/*<br />
 
 
</style><center><div id="risingshadowskaz"><div class="rbackout"><div class="rborder"><div class="rback"><div class="rtitle">RISING SHADOWS</div><div class="rsublittle">HARRY POTTER UNIVERSE ♦ großbritannien ♦ 2022 ♦ L3S3V3</div><br><div class="rsub">A Longing To Fall with The Voices Who Call To Dive Into The Deep Where My Soul Is Asleep</div><img class="rdivider" src="https://abload.de/img/pngfind.com-diagon-al7rceb.png"><br>
<div class="rsmallborder">
 
  <div class="rtext"><div class="rsubgross">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta ut leo vitae feugiat. Donec ut condimentum justo. Donec vitae tempus nulla. Duis hendrerit pellentesque pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pellentesque finibus nisi quis tempor. Phasellus quis dictum lectus, vel porta ex.<br><br>

Aliquam et quam vitae enim viverra condimentum. Aliquam in eros quam. Nullam elementum neque aliquet, aliquet dolor et, elementum tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ut metus porta, pulvinar metus eget, varius tellus. Phasellus tincidunt enim at faucibus tempus. Aenean sed dolor in quam elementum fringilla sit amet vitae purus.

Vivamus elementum ex nec magna sodales tincidunt. Aenean vitae lectus dictum, consectetur nunc sit amet, auctor magna. Fusce pellentesque venenatis porttitor. Cras ac ultricies nulla, at fringilla felis. Sed tempor erat vitae sapien pharetra venenatis. Quisque tempor arcu vel elit facilisis molestie. Aliquam erat volutpat. Duis eget neque nisi. Morbi sollicitudin diam eget diam tempus, tristique blandit ligula feugiat. Duis pretium iaculis odio sed vehicula. Quisque gravida nisi magna, sed venenatis lorem egestas eu. Mauris aliquam pulvinar dolor et hendrerit. Duis rhoncus finibus mauris, sed semper enim tristique ac. Pellentesque ut nisl dignissim lacus cursus tempus vel eu felis. In pellentesque ex ut dolor vestibulum pulvinar. Donec ac nunc sit amet orci feugiat tincidunt non non leo.<br><br><br>
    
  <table cellspacing=4 cellpadding=0 style="width: 100%"><tr><td style="width: 25%"><div class="rkasten"><a href="http://risingshadows.de/" target="blank" class="rlink">INDEX</a></div></td><td style="width: 25%"><div class="rkasten"><a href="http://risingshadows.de/" target="blank" class="rlink">REGELN</a></div></td><td style="width: 25%"><div class="rkasten"><a href="http://risingshadows.de/" target="blank" class="rlink">WIKI</a></div></td><td style="width: 25%"><div class="rkasten"><a href="http://risingshadows.de/" target="blank" class="rlink">GESUCHE</a></div></td></tr></table></div></div></div></center>
</center></div></div></div></div></div>

Ich wäre für einen Tipp o. ä. sehr dankbar, da ich hier einfach nicht weiter komme.

Vielen Dank und liebe Grüße
Kaz
 
Hallo und vielen Dank schon einmal für deine Antwort.

Dort steht: "Failed to load resource: the server responded with a status of 404 ()"

Wenn es das Bild ist, was ich meine, weiß ich nicht, was ich tun sollte. Das Bild ist hochgeladen und verlinkt... Irgendeine Idee?
 
404 heißt das Bild existiert nicht. Ich würde es auch vermeiden Bilder bei imgur abzulegen und in die eigene Webseite einzubinden. Leg sie auf deinem Webspace ab.
 
Die Herausforderung ist, dass ich dieses Template auf verschiedenen Websites posten möchte und für andere nutzbar machen möchte. Da kann ich das nicht auf dem Webspace ablegen... richtig? Gibt es noch eine andere Lösung?
 
Auf DEINEM Webspace kannst Du das doch ablegen und dann von dort einbinden? Dürfte zuverlässiger sein als ein Bilder-Upload-Service.
 
Ich habe mich nun via FileZilla und auf meinem Server angemeldet.
Dort habe ich einen neues Verzeichnis mit dem Namen "bilder" erstellt, sodass oben nun "Server: /bilder" steht. Die PNG datei heißt: "Hintergrund.png"

Also habe ich nun versucht im Code zu schreiben:
background: url('WEBSITE-URL/bilder/hintergrund.png')no-repeat center center; }

Bei der WEBSITE-URL steht natürlich die richtige URL, die auch beim Server oben eingegeben ist vom Login. Dennoch klappt es nicht. Kannst du mir hier nochmal weiterhelfen? Ich habe sowas noch nie gemacht und möchte gern dazu lernen.

Vielen Dank!
 
Kaz schrieb:
Dort habe ich einen neues Verzeichnis mit dem Namen "bilder" erstellt, sodass oben nun "Server: /bilder" steht. Die PNG datei heißt: "Hintergrund.png"

Also habe ich nun versucht im Code zu schreiben:
background: url('WEBSITE-URL/bilder/hintergrund.png')no-repeat center center; }
Zum Vergrößern anklicken....
Hintergrund.png und hintergrund.png sind zwei verschiedene Dateien.
 
Das war mein Fehler oben in dem Post. Beide "h"s sind klein geschrieben, sowohl in der Datei als auch im Code.
 
Kaz schrieb:
Außerdem zerschießt es mir ein wenig das Forum, in dem das Hintergrundbild nicht angezeigt wird. Es verschieben sich dadurch z. B. ein paar Buttons.
Zum Vergrößern anklicken....
Was für eine Forensoftware nutzt du da?
Bei dem veralteten HTML kann das ja nichts neueres sein

Hast du mal ein Link zu der Seite, wo das Bild nicht angezeigt wird , dann können wir mal schauen was da falsch laufen könnte
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben