Bild ohne Wiederholungen über Hintergrund legen

[TNU_sky]

Aloha zusammen,

Ich bin ein völliger Anfänger was HTML/CSS angeht und stehe nun vor folgendem Problem:

Ich möchte quasi ein zweites Bild auf dem Hintergrund platzieren. ICh veranschaulich das mal schnell

So ist es momentan :



Und so soll es eigentlich aussehen :



ICh hab die Stelle gefunden, wo Ich das Hintergrundbild verändern kann. Jeglicher Versuch, ein zweites Bild quasi "darüberzulegen" schlägt fehl.
Dieses kleine Bild soll also über den eigentlichen Hintergrund gesetzt werden :




Hoffe, mein Problem ist zu erkennen. Wäre klasse, wenn mir jemand helfen könnte.

Gruß,
Dennis

 

[Wustersoss]

Hallo,

Ich bin ein völliger Anfänger was HTML/CSS angeht und stehe nun vor folgendem Problem:

Anfänger zu sein ist keine Schande und du hast kein Problem sondern eine Anforderung, die du nicht umsetzen kannst. Ein Problem ist ganz was anderes, das nur so am Rande. Aber jetzt hast du ja das Forum hier entdeckt und hier wird dir weiter geholfen.

Ich möchte quasi ein zweites Bild auf dem Hintergrund platzieren.

Das kann man doch prima mit einem Bildbearbeitungsprogramm machen, warum willst du 2 Bilder senden und dann beim Benutzer übereinander anzeigen lassen.
Als 1 Bild spart das Zeit und sieht auf allen Rechner identisch aus.

NB:
Zudem wäre es für die Helfer immer gut wenn Sie auch Einblick in Deinen Code, also HTML und CSS haben können, denn wir können ja nicht wissen wie du das umgesetzt hast.

Wenn du uns noch deine Testumgebung (zB. Windows mit Opera und PSpad als Editor) mitteilen würdest, wäre das fast perfekt.

 

[TNU_sky]

Hey, danke für die Antwort.

Sicherlich könnte cih das ohne Probleme in einem Bildbearbeitungs-Programm Marke PS machen, allerdings könnte ich das eigentliche Hintergrundbild dann nciht mehr verwenden, da es nun ständig wiederholft wird und so der Übergang zu sehen ist. Es sei denn, es gibt irgendeinen "Kniff", der mir nicht geläufig ist ;)

Ich bin mit Chrome und Windows 7 unterwegs. Einen Editor benutze Ich nicht, sondern mach das direkt über die Option "edit HTML" bei Tumblr

Gibt's ne Möglichkeit, den Code hier irgendwie zu posten?
Wenn Ich den hier einfüge, dann steht da, das Ich die 56505-Zeichen Marke überschritten habe.
Und welchen Teil man genau braucht, weiß Ich leider nicht :(

Hier zumindest das Stück mit dem Hintergrund :

 <style type="text/css">        
        body{
            
            background: {color:Background} 
            url('http://img714.imageshack.us/img714/7697/mitte.png') top left ;
            margin: 0;
            padding: 0;
            font-family: {font:Body};
        
        }
        
         
            
        .clear {
            clear: both;
            height: 0px;
            overflow: hidden;
        }
        
        a img {
            border: none;
            
        }
        
        #wrapper {
            width: 825px;
            margin: 0 auto;
            
        }
        
            #wrapper #title {
                margin: 30px 0;
                color: #fff;
                font-size: 50px;
                font-weight: bold;
                font-family: {font:Title};
                text-shadow: 1px 3px 5px rgba(0,0,0, 0.5);
                letter-spacing: -1px;
        
                
            }
            
                #wrapper #title a {
                    color: #fff;
                    text-decoration: none;
                }
            
            #wrapper #content {
                width: 520px;
                float: left;
                
            }
            
                #wrapper #content .post {
                    font-family: {font:Body};
                    background: #fff;
                    padding: 10px;
                    position: relative;
                    border: solid;
                    border-width:thin;
                }
                    
                    #wrapper #content .post .media {
                        text-align: center;
                        margin-bottom: 10px;
                    }
                    
                    #wrapper #content .post .quotebg {
                        font-family: georgia, serif;
                        font-size: 150px;
                        color: {color:Background};
                        opacity: 0.2;
                        filter: alpha(opacity=20);

Es handelt sich übrigens um einen Blog bei Tumblr, das Theme ist das Standard-Theme.

Gruß,
Dennis

 

[Wustersoss]

Irgendwie werde ich aus deiner Aussage nicht Schlau.

Sicherlich könnte cih das ohne Probleme in einem Bildbearbeitungs-Programm Marke PS machen, allerdings könnte ich das eigentliche Hintergrundbild dann nciht mehr verwenden, da es nun ständig wiederholft wird und so der Übergang zu sehen ist. Es sei denn, es gibt irgendeinen "Kniff", der mir nicht geläufig ist

background-repeat:no-repeat;

sorgt dafür, dass das Hintergrundbild nicht wiederholt wird.

Lesetipp:
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Wenn du css background beipiele bei Google eingibst, sollten auch viele gute Beispiele kommen.

 

[Doctype]

Hi TNU_sky,

ich an deiner Stelle würde die zweite Grafik mittels DIV-Layer prozentual positionieren und diese mit z-index:2 ansprechen.
Mit z-index:2 kannst du die Grafik praktisch einfach darüber setzen.

.name {

background-image:url(DEINEGRAFIK.ENDUNG);
z-index:2;
position:absolute;
top:0 !important;

Ob meine Variante nun den gewünschten Effekt erzielt, wirst du am Ende sehen. Auf jeden Fall ist es wichtig, dass du z-index:2 einsetzt. Am besten probierst du es einfach aus.

!Doctype

 

[Paric]

Hi TNU_sky,

ich an deiner Stelle würde die zweite Grafik mittels DIV-Layer prozentual positionieren und diese mit index:2 ansprechen.
Mit index:2 kannst du die Grafik praktisch einfach darüber setzen.

.name {

background-image:url(DEINEGRAFIK.ENDUNG);
index:2;
position:absolute;
top:0 !important;

Ob meine Variante nun den gewünschten Effekt erzielt, wirst du am Ende sehen. Auf jeden Fall ist es wichtig, dass du index:2 einsetzt. Am besten probierst du es einfach aus.

!Doctype

Was Du meinst ist z-Index, oder?

 

[Doctype]

Ja, meine ich! War mein Fehler.
Habe ich korrigiert. Ach ja: index:2 ging komischerweise trotzdem.

 

[Paric]

wobei mir einfällt. Da sein Hintergrund im body verankert ist kann er auf den z-index getrost verzichten, denn das div wird immer auf dem body-background angezeigt werden.

 

[Doctype]

Stimmt auch wieder.