XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   [gelöst] Hintergrund vertikal flexibel (http://xhtmlforum.de/showthread.php?t=65197)

fritze-jr 19.07.2011 12:31

[gelöst] Hintergrund vertikal flexibel
 
Sevus Pros,

ich komme nicht weiter unter kapier’ da was nicht: Hier mal mein Beispiel: Flexibler Hintergrund

Ich würde gern ein Hintergrundbild flexibel einbinden. Sprich Rand z.B. 5% und von oben immer 30% Luft.
5% linker Rand klappen prima, aber 30% von oben wollen gar nicht.

Info: IE interessiert mich nicht die Bohne! :mrgreen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Flexibler Hintergrund</title>
        <style type="text/css" title="text/css" media="screen">
                body {
                        background-color: red;
                    background-image: url(img/tt-bgr3.gif);
                    background-repeat: no-repeat;
                    background-position-x: 10%;
                    background-position-y: -25%;
                }
                h1 {
                        width: 80%;
                        background-color: rgba(255,255,255,0.5);
                        text-align: center;
                }
        </style>
</head>

<body>
    <div id="wrapper">
                <h1>Hallo!</h1>
    </div>
</body>
</html>

Bin für jeden Tipp dankbar.
Andreas

fricca 19.07.2011 12:45

Tipp: Validieren.

fritze-jr 19.07.2011 13:07

Gut, background-position (background-position: 10% 30%;) zusammen gefasst, aber ändern tut das an der Sache leider nichts.

Gibt es noch andere Tipps?

paulepulmo 19.07.2011 14:26

Hallo,

HTML-Code:


/* Außen und Innenabstände zurücksetzen */
* {
  margin:0;
  padding:0;
 }
 
 html,body{
  height:100%;
}

body {
  background: url(deinbild.gif) no-repeat 10% 30% #f00;
}

h1 {
 width: 80%;
 background-color: rgb(255,255,255); /* Hier lieber eine halbtransparente Hintergrundgrafik */
 text-align: center;
}

So funktionierts.
Achso, nimm lieber noch ein anderen DOCTYPE.

paulepulmo

fricca 19.07.2011 14:48

Vermutlich kommt noch eine falsche Vorstellung von Prozentwerten bei der Positionierung von Hintergrundbildern dazu.
Lesestoff: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : BACKGROUND-POSITION }

paulepulmo 19.07.2011 15:22

Hm, an was man alles denken muss. Aber es leuchtet ein.

fritze-jr 19.07.2011 15:38

Danke Euch allen!
Ich werde mir das erstmal in Ruhe durchlesen und dann nochmal testen.


Viele Grüße Andreas


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023