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

[ERLEDIGT] Hintergrundbild lässt immer Rand

AngPal

AngPal

Neues Mitglied
Hallo,
ich habe vor gut 10 Jahren, als es noch kaum wysiwyg Editoren gab mal html (mit selfhtml) gelernt. Nicht professionell, aber meine Websites konnte ich basteln. Seitdem hatte ich nichts mehr damit zu tun. Vor 2 Tagen wollte eine Freundin eine Website und mich hat wieder die Bastelleidenschaft gepackt:rolleyes:. Ich fummle im Moment mit CSS herum und habe einen Basisaufbau der Website gemacht.

Damit gibt es 2 Probleme (im Moment). Das Hintergrundbild soll stehenbleiben, aber Randlos im Browser angezeigt werden. Die transparenten Flächen sollen darüber hinwegschweben und die Schrift und Bilder tragen.

1. Das Hintergrundbild weigert sich standhaft den Browser RANDLOS auszufüllen. Das beste was ich hinkriege ist randlos rechts und unten.
2. Irgendwie verstehe ich nicht, warum die Schrift, die ich in die transparenten Flächen einfüge auch transparent wird. Ich versuche die Schrift unabhängig vom Container zu machen, aber ich kapiers im Moment nicht.

Ich weiss, das ist noch lange nicht alles, aber wenn mir hier jemand Tipps geben kann, verstehe ich vielleicht wieder ein Stückchen mehr. Mir ist klar, dass ich noch eine ganze Weile lernen und üben muss.

Vielen Dank schonmal,
LG

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>index</title>
  <style type="text/css">
#wrapper {
background-repeat: no-repeat;
opacity: 0.7;
background-image: url(../Website%20Komponenten/Background%20Vers2_1920x1200.jpg);
width: 100%;
height: 100%;
background-attachment: fixed;
position: absolute;
background-position: center center;
}
#header {
border-style: none;
border-width: 0px;
height: 100px;
width: 60%;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 5px;
opacity: 0.7;
background-color: #f3f3e4;
}
#content {
width: 60%;
margin-right: 20%;
margin-left: 20%;
margin-top: 5px;
height: 400px;
background-color: #f3f3e4;
opacity: 0.7;
}
#navigation {
width: 60%;
margin-right: 20%;
margin-left: 20%;
height: 20px;
background-color: #f3f3e4;
opacity: 0.7;
}
#footer {
margin: 5px 20% 5%;
background-color: #f3f3e4;
width: 60%;
opacity: 0.7;
}
  </style>
</head>
<body>

<div id="wrapper">
<div id="header"> <img
 style="width: 100px; height: 100px;" alt="PK Logo"
 src="../Website%20Komponenten/PK%20Logo%20100x100-.jpg"></div>
<div id="navigation"></div>

<div id="content">
   <span style="">also mal was schreiben bla bla bla</span><br>
<font size="+2">
<span style="font-family: Freestyle Script;"></span></font>
<font
 id="font" size="+2"><span
 style="font-family: Freestyle Script;"><br>
<br>
<br>
</span></font></div>
<div id="footer">footer</div>
<br>
</div>
</body>
</html>
 
Werbung:
AngPal schrieb:
1. Das Hintergrundbild weigert sich standhaft den Browser RANDLOS auszufüllen.
Zum Vergrößern anklicken....
Es weigert sich überhaupt nicht; würde ja gerne, wenn es denn nur könnte - blos diese voreingestellten Randabstände im Dokument halten es gekonnt auf Distanz vom Viewportrand :cool:
CSS: 
html,body {
  margin:0;
  padding:0;
}
AngPal schrieb:
2. Irgendwie verstehe ich nicht, warum die Schrift, die ich in die transparenten Flächen einfüge auch transparent wird. Ich versuche die Schrift unabhängig vom Container zu machen, aber ich kapiers im Moment nicht.
Zum Vergrößern anklicken....
opacity schliesst auch den Inhalt mit ein:
Ist dieser Effekt nicht erwünscht, und beispielsweise ein semitransparentes PNG-Hintergrundbild* keine Option, bieten rgba() oder hsla() Abhilfe - das a steht für den Alphakanal, der die Deckkraft definiert:
* Gemäß der CSS-Vorgabe background-color:#f3f3e4 erfordert das eine Grafik mit 1px*1px, die auf X- u. Y-Achse repeatet wird.
 
Oooh, toll! Vielen Dank! Das bringt mich schon ein gutes Stück weiter:):)

Cool, die Seiten, die du verlinkt hast gefallen mir ausserordentlich gut!!

Ich werde mich minutiös durch deine Lösungsvorschläge durcharbeiten. Super, viel zum lernen. Ich bin ja nicht mehr gaaanz so jugendlich, aber man darf nie aufhören die Birne in Schwung zu halten:cool:.

Ich melde mich nochmal, wenn ich auf "Widerstand" stoße.

LG
 
Werbung:
Huch! Ja dann schnell noch:
Herzlichen Glückwunsch!! (nachträglich)
Bei mir fehlen bis zur 5. Dekade auch nur noch so um die 800 Tage:D

Es hat übrigens geklappt, das Hintergrundbild funktioniert, juhuu. Und der Tip mit dem transparenten png 1 px ist super! Ich erinnere mich sogar das mal vor Jahren auch mal so irgendwie gemacht zu haben, aber.......:oops:

LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben