mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mi 18.09.2024 07:48 Benutzername: Passwort: Auto-Login

Thema: Hintergrundbild gekachelt inkl. zentriertem Bild darüber vom 09.07.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Hintergrundbild gekachelt inkl. zentriertem Bild darüber
Seite: 1, 2  Weiter
Autor Nachricht
gotoAndHelp
Threadersteller

Dabei seit: 09.03.2010
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:07
Titel

Hintergrundbild gekachelt inkl. zentriertem Bild darüber

 Antworten mit Zitat Zum Seitenanfang
Hallo!
Problem: Vorschaltseite, da die aktuelle Seite sich in Bearbeitung findet. Hintergrundbild soll sich wiederholen. Auf diesem gekachelten Hintergrundbild soll ein weiters Bild mittig platziert liegen.
Leider klappt trotz Google- und Forensuche inkl. selfhtml grad gar nichts. Bin auch der absolute Nicht-Programmierer.
Bitte um HILFE!!! [/code]DANKE!!!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Titel der Website</title>
   <style type="text/css">
   </style>
</head>

<body>
   <div style="background-image:url (Name des Bildes.jpg); background-repeat:repeat-x; margin:0px">
   </div>
   <div style="background-image:url (Name des Bildes.jpg); background-repeat:repeat-y; margin:0px">
     </div>
 
  <div#Name des Bildes, welches zentriert über dem Hintergrundbild liegen soll.png
 { position:relative; }
}
img#http://url des Bildes/name des bildes.png {
  position:absolute;
  top:50%;
  left:50%;
  width:1024px;
  height:768px;
  margin-left:-200px;
  margin-top:-150px;
}

  </body>
</html>
  View user's profile Private Nachricht senden
DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 36
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:15
Titel

Antworten mit Zitat Zum Seitenanfang
ungefähr so:

HTML:
Code:
<div#Name des Bildes, welches zentriert über dem Hintergrundbild liegen soll></div>


CSS:
Code:
div#Name des Bildes, welches zentriert über dem Hintergrundbild liegen soll {
  position:absolute;
  background: url('http://url des Bildes/name des bildes.png');
  top:50%;
  left:50%;
  width:1024px;
  height:768px;
  margin-left:-200px;
  margin-top:-150px;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 36
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:21
Titel

Antworten mit Zitat Zum Seitenanfang
Ihr beide, nochmals das Einbinden von CSS in HTML studieren * Ööhm... ja? *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 36
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:27
Titel

Antworten mit Zitat Zum Seitenanfang
Zitat:
Ihr beide, nochmals das Einbinden von CSS in HTML studieren * Ööhm... ja? *


achherje ... danke!

jetzt seh ich das gewuschel erst.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
gotoAndHelp
Threadersteller

Dabei seit: 09.03.2010
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:33
Titel

Antworten mit Zitat Zum Seitenanfang
@ Azazael: Hast Du eine schnellere und lösungsorientiertere Hilfe? DANKE!
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 36
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:42
Titel

Antworten mit Zitat Zum Seitenanfang
gotoAndHelp hat geschrieben:
@ Azazael: Hast Du eine schnellere und lösungsorientiertere Hilfe? DANKE!

Warum ist das CSS (unten) nicht im <style>-Tag?
Mach das inline-css weg und benutz IDs und Klassen:
Code:

HTML
<div id="bla">
<img src="pfad/mittigesbild.jpg" alt="Bildbeschreibung"/>
</div>

CSS
#bla{
text-align:center;
width:123;
height:123;
background-image: url(pfad/kachelbild.jpg);
}


Zuletzt bearbeitet von SimonDerDude am Mo 09.07.2012 13:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 36
Geschlecht: Männlich
Verfasst Mo 09.07.2012 13:43
Titel

Antworten mit Zitat Zum Seitenanfang
Das sollte richtiger sein. Nicht das Optimum, aber du musst ja auch noch ein wenig was machen *zwinker*

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Titel der Website</title>
   <style type="text/css">
   
   div#pattern {
      background:url('bild, welches sich wiederholen soll');
      position:relative;
      width:100%;
      height:100%;
   }
   
   div#zentriertes_bild {
      position:absolute;
      top:50%;
      left:50%;
      width:1024px;
      height:768px;
      margin-left:-512px;
      margin-top:-384px;
   }
   
   </style>
</head>

<body>
   <div id="pattern">
      <div id="zentriertes_bild"><img src="bild, welches zentriert werden soll" /></div>
   </div>

  </body>
</html>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht: Männlich
Verfasst Mo 09.07.2012 14:07
Titel

Antworten mit Zitat Zum Seitenanfang
div#foo zu benutzen ist relativ sinnfrei und bremst nur den browser.
IDs müssen ohnehin unique sein, ob das element ein div ist oder nicht ist egal.
  View user's profile Private Nachricht senden
 
Ähnliche Themen inkl. USt vs. inkl. 19% MwSt Kleinunternehmer e-Shop Hinweis
Fehlende Scrollbar bei zentriertem Inhalt (CSS)
Mit Flash Tween von linksbündigem zu zentriertem Text machen
Hintergrund: Anfangsbild, danach ein anderes gekachelt
CSS - Hintergrund wird nicht komplett gekachelt
Nahtlose Texturen im Ordner gekachelt anzeigen? Script?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB