Entwickler-Ecke :: Thema anzeigen - gestrecktes Bild als Hintergrund

Bergmann89 - Mo 31.05.10 18:30
Titel: gestrecktes Bild als Hintergrund

Hey,

ich sitz grad vor nem Problem bei dem ich nich weiter weiß. Ich will ein Bild als Hintergrund haben, das ich beim Größenänderung an die neue Größe anpasst. Hier erstma der Code dazu:

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:

<%@ Master 
        Language="C#" 
        AutoEventWireup="true" 
        CodeBehind="admin.master.cs"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Lagerverwaltung - Administrator</title>
    <style type="text/css">
        #Form
        {
            height: 529px;
            width: 949px;
        }
        html, body 
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        img#bg
        {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
        } /*<< 1 >>*/ 

        #NaviBG
        {
            position:relative;
            top:0;
            left:0;
            width:100%;
            height:400px;
            z-index:1;
        }/*<< 2 >>*/   

        #MainBG
        {
            position:relative;
            top:0;
            left:0;
            width:100%;
            height:400px;
            z-index:1;  
        }/*<< 3 >>*/   

        #Content
        {
            position:relative;
            z-index:1;
        }/*<< 4 >>*/      
  
        #NaviContent    
        {
            position: relative;
            top: -400px;  
            z-index:2;
            height: 0px;
        }/*<< 5 >>*/      
    
        #MainContent    
        {
            position: relative;
            top: -400px;  
            z-index:2;
            height:0px;
        }/*<< 6 >>*/                
    </style>
        
</head>
<body>  
    <img src="/ASPX/images/lager.jpg" alt="background image" id="bg" />
    <div id="Content">/*<< 7 >>*/ 
    
    <form ID="Form" runat="server">
        <table align="center" border="0" cellpadding="0" cellspacing="0" 
            style="height: 300px;">
            /*[...]*/
            <tr>
                <td bgcolor="#1F2B73" style="width: 2px"></td>
                <td>            
                    <table  border="0" cellspacing="0" cellpadding="0" align="top" style="height: 95px; width: 100%">        
                        <tr>
                            <td valign="top" bgcolor="White" style="width:160px;">
                                <img id="NaviBG" src="/ASPX/images/leftnavi.jpg" alt="NaviBackground" />
                                <div id="NaviContent">/*<< 8 >>*/ 
                                <table border="0" cellspacing="0" cellpadding="5">
                                    /*[...]*/
                                </table>
                                </div>
                            </td>
                            <td valign="top" align="center">
                                <img id="MainBG" src="/ASPX/images/leftnavi.jpg" alt="MainBackground" />
                                <div id="MainContent">/*<< 9 >>*/ 
                  
                  <asp:contentplaceholder id="CPH1" runat="server"></asp:contentplaceholder>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td bgcolor="#9E392F" style="width: 2px"></td>
            </tr>
            /*[...]*/
        </table>
    </form>
    </div>
</body>
</html>

Nun zur Erläuterung des Problems: Wie man sieht habe ich einen Bild definiert (siehe Highlight 7), mit den Maßen [100%, 100%] (siehe Highlight 1) das über die ganze Seite geht. Darüber liegt dann der eigentliche Inhalt in einem DIV-Tag (siehe Highlight 4). Das funktiniert auch so wie es soll. Nun würde ich aber gern auch in der Tabelle ein Bild als Hintergrund haben, welches sich bei Größenänderung mit anpasst. Also hab ich mir erstmal wieder eine Image definiert (siehe Highlight 8 bzw. 9). Die hat die Maße [100%, 400px] (sihe Highlight 2 bzw. 3). Da hab ich dann versucht, wie bei dem anderen Hintergrund, den Inhalt mit dem DIV-Tag drüber zu legen, aber hier musste ich die Höhe noch anpassen, da der Inhalt sonst unter dem Bild wäre (siehe Highlight 5 bzw. 6). Wenn ich im Bild eine 100% Höhe nehme verhält es sich so, wie ich es gern hätte. Aber dann ist der Inhalt unter dem Bild, bzw nicht am oberen Rand der Tabelle.
Weiß jmd wie ich das Bild als Hintergrund in die Tabelle bekomm, so das es sich verzerrt un der Inhalt trotzdem richtig angezeigt wird? Würd mich riesig freun...

MfG & Thx Bergmann

Bergmann89 - Mo 31.05.10 21:24

Ahh, perfekt. Vielen Dank. Für alle die auch auf der Suche nach der Lösung sind, oder sein sollten:

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

<style type="text/css">
  #NaviBG
  {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
  }    
  #MainBG
  {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;  
  } 

  #NaviContent    
  {
    position: relative;
    top: 0px;  
    z-index:2;
    height: 100%;
  }         
  #MainContent    
  {
    position: relative;
    top: 0px;  
    z-index:2;
    height: 100%;
  }               
</style>

<table  border="0" cellspacing="0" cellpadding="0" align="top" style="height:100px; width:100%">        
  <tr>
    <td valign="top" bgcolor="White" style="width:180px; height:100%;">
      <div style="position:relative; width:100%; height:100%;">
        <div id="NaviContent">
          <table border="0" cellspacing="0" cellpadding="5" style="height:100%">
            /*[...]*/
          </table>
        </div>
        <div style="width:100%; height:100%; position:absolute; top:0px;">
          <img id="NaviBG" src="/ASPX/images/leftnavi.jpg" alt="NaviBackground" />
        </div>
      </div>
    </td>
    <td valign="top" align="center">
      <div style="position:relative; width:100%; height:100%;">
        <div id="MainContent">
          
          <asp:contentplaceholder id="CPH1" runat="server"></asp:contentplaceholder>
        </div>
        <div style="width:100%; height:100%; position:absolute; top:0px;">
          <img id="MainBG" src="/ASPX/images/leftnavi.jpg" alt="MainBackground" />
        </div>
      </div>
    </td>
  </tr>
</table>

€: MIST, zu früh gefreut. Jetzt hab ich zwar, das der Hintergrund un der Inhalt sich so verhalten wie ich will, aber jetzt ändert sich die Größe der Tabelle nicht mehr, wenn der Inhalt zu groß wird -.-
€2: im InetExplorer hauts erst recht nich hin, mit FF gings bis jetzt ja einigermaßen...
€3: jetzt is es so wie es sein soll^^ HAb den Code oben angepasst... Nochma Danke für die Hilfe.

MfG Bergmann

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!