Blog-Hintergrund - wie?

gossipgirlz

Hi ihr Experten :)

ich könnte mal eure Hilfe gebrauchen.
Ich möchte für mein Blog GossipGirlz.de! Gossip-Blog mit Klatsch und Tratsch, Paparazzi-Fotos und GerÃ¼chten Ã¼ber alle Stars, Celebrities und VIPs aus Hollywood gerne einen Hintergrund ganz links und ganz rechts. Also an den Stellen, an denen es nix mehr Geschriebenes mehr gibt.

Ich muss mich noch zwischen zwei Arten entscheiden, aber will nun erstmal nachfragen, wie ich welche Möglichkeit genau umsetzen könnte.

Die eine Möglichkeit ist sowas hier: Prestige Cars Blog - also eine ausgewählte Grafik, die dann mit ein wenig weißem Abstand rechts und links erscheinen soll.

Die andere Möglichkeit ist etwas mit Verlauf, am Rand dunkler - so wie hier My Way Betty Ford Klinik | Suchtklinik für Privatpatienten oder hier StyleXplorer* :: Restaurants, Shops, Clubs, Bars, Ausstellungen und andere coole Spots.

Ist beides nicht zu schwer umzusetzen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Jeriko

Nö, eigentlich nicht. Wie es dann gemacht wird kommt aufs Hintergrundbild an. Grundsätzlich wirds aber in der style.css wie folgt eingefügt:

PHP

body { background: url(hintergrund.jpg); }

hintergrund.jpg muss natürlich angepasst werden. Ist das Bild eine Kachel, die sich immer wiederholen soll, reicht das schon aus. Wenn nicht, hier mal nachschauen für weitere Optionen.

Gruß Jeriko

gossipgirlz

Okay, und wo würde ich den Code einfügen?

PHP

/* 
Theme Name: lightCMS
Theme URI: http://www.GFXedit.com
Version: 1.2
Description: A Content management system like light weight Theme from <a href="http://www.gfxedit.com">GFXedit.Com</a>
Author: Sreejith
Author URI: http://www.sr-ultimate.com
*/
/* BODY CONTAINER */
             


                #container {
            width: 900px;
            margin: 0 auto;
            font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; 
            font-size: 11px;
            line-height: 1.6em;
            color: #333;
            background-color: #FFF;


        }
        
        h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            font-weight: strong;
            color: #274722;
            margin-bottom: 5px;
            background-color: #FFF;
                        line-height:1.1em;


        }
        
        h2 {
            color: #666666;
            font-size: 13px;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #FFF;
            border-bottom: 1px solid;
        }
        
        a {
            color:#ff69b4;
            text-decoration: none;
        }


        a:hover {
            color:#ff69b4;
            background-color: #F5F5F5;
        }


        
        #searchform {
            float:right;
            margin-top: -45px;
            font-size: 9px;
                        
                        
        }
        
        input {
            background-color: #FFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }


        
        .button {
            padding: 2px;
        }
        
/* HEADER ELEMENTS */


        #header {
            border-bottom: 0px solid #948979;
            clear: both;




        }
        #header h1 {
            font-family: Georgia, "Times New Roman", Times, serif;
                        font-size: 22px;
font-weight: normal;
        }
        
#header h1 a:hover {
    text-decoration:underline;
}


        #header p { 
            margin-top: 0px;
            margin-left: 30px;
            color: #999999;
        }
        #header    input {
            background-color: #FFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }


#header input:hover {
    border:1px solid #999;
    background-color: #f4f4f7;
    color:#666;    
}
    #header input:focus {
    border:1px solid #999;
                    background-color: #f4f4f7;
    color:#333;
}


/* NAVIGATION BAR */




         #navigation ul {
            margin-left: 0;
            padding-left: 0;
            list-style-type: none;            
            float: left;
            padding-right:7px;




            }
     #navigation li {
            display: inline;


            }


        #navigation a {
            display: block;
            padding: 5px;
            width: 140px;
        
        }
        #navigation h2 {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: strong;
            font-size: 13px;
            text-decoration: none;
            margin-bottom: 5px;
            background-color: #FFF;


        }


        #navigation a:link, #navlist a:visited {
            color:#ff1493;
            text-decoration: none;
        }
        
        #navigation a:hover {
            background: #000000 96% 50% no-repeat;
            background-color: #F5F5F5;
            color:#ff1493;
        }


        #navigation p {
            margin-top: 30px;
            padding: 0px;
            border-top: 1px solid #CCC;
                        float: left;
        }


        #navlist {
            margin-top: 19px;




        }
        #overline {
        padding-top: 10px;
        border-top: 1px solid;    
        }
        #linkcat {
        list-style: none;
        }
        
/* CONTENT ELEMENTS */


        #content {
            width: 500px;
            margin-left: 187px;
            margin-right: 0px;
                        font-size: 13px;


                    }
                                
        
        #content p {
            padding-bottom: 10px;


        }


#content .articleimg {
    float:right;
    padding:5px;
    border:1px solid #999999;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:15px;
}
#content .articleimgleft {
    float:left;
    padding:5px;
    border:1px solid #999999;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:15px;
}
    #content input {
            background-color: #FFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }
        
                    #content input:hover {
    border:1px solid #999;
                background-color: #f4f4f7;
    color:#666;
    
}
    #content input:focus {
    border:1px solid #999;
    color:#333;
}
.storycontent {
                        
        }
        .feedback {
    padding-bottom: 10px;
    border-bottom: 1px solid #CCC;
        font-size: 11px;
        }
                .meta {
                    padding-top: 5px;
        text-align: right;
                font-size: 11px;
        }




        
.date {
        text-align: right;
                font-size: 11px;
}




/* SIDEBAR ELEMENTS */


        #sidebar {
            float: right;
            width: 175px;
            padding-left:10px;
        }
        
        #sidebar li {
        list-style: none;
        }
#sidebar p {
    padding-bottom: 10px;
            border-bottom: 1px solid #DDDDDD;
        }
        .pagenav li {
        list-style: none;


        }


/* FOOTER ELEMENTS */


        #footer {
            margin-top: 20px;
            clear: both;
        text-align: center;
            font-family: Georgia, "Times New Roman", Times, serif;
            background: #f4f5f1;
            padding: 0px 5px 0px 5px;
        }
        
        #footer p {
            color:#336633;
            padding: 5px;
        }
        
        #footer p a {
            color: #336633;
            border-bottom: 1px dotted #336633;


        }
        
        #footer p a:hover {
            color: #FFFFFF;
            background-color:#bab7b6;
        }
        
/* COMMENT ELEMENTS */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}


#commentform {
margin: 1em 0;
background: #ffffff;
width: 40em


}


#commentform textarea {
background: #ffffff;
width: 20em
}
#commentform textarea:hover {
background: #f6f4f4;
border: 1px solid #9d9d9c;
}
#commentform textarea:focus {
background: #f6f4f4;
border: 1px solid #9d9d9c;
}


#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 180px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #f6f4f4;
border: 1px solid #9d9d9c;
width: 180px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #f6f4f4;
border: 1px solid #9d9d9c;
width: 180px;
}


.pg_nav {
        text-align: center;
        
}
/* BLOCKQOUTE */


blockquote {
border-left: 3px solid #666666;
margin: 1em 0;
padding: 10px;
background: #f4f5f1;
width: 300px;
}






#content img { border: 1px solid #999999; } img { padding: 5px; }


#content img.wp-smiley {
    margin:0;padding:0;border:none;
    }




#content input { font-size: 11px;                        
        }


.date {
    margin-bottom:50px;
    }

Alles anzeigen

Julia²

Direkt am Anfang UNTER "/* BODY CONTAINER */".

PS: Aber eigentlich ist es egal. Aber BODY gehört der Übersicht wegen nach oben!

Merz Manuel

Kannst du eigetnlich auch gleich deinem #container mitgeben. Musst dann evtl. aber noch einiges ändern damit das so erscheint wie du das gerne hättest :)

Julia²

Merz Manuel, Du weißt aber das der #container in diesem Fall nicht den kompletten Hintergrund bedeckt?!

Indem Fall würde das Hintergrund Bild nur im Container zu sehen sein, aber nicht komplett auf der Seite als Haupthintergrund! Das MUSS in den Body Tag!

Merz Manuel

Zitat von Julia²

Merz Manuel, Du weißt aber das der #container in diesem Fall nicht den kompletten Hintergrund bedeckt?!

Indem Fall würde das Hintergrund Bild nur im Container zu sehen sein, aber nicht komplett auf der Seite als Haupthintergrund! Das MUSS in den Body Tag!

Da hast du natürlich Recht, nur will er es ja nicht auf den ganzen Bildschirm darstellen sondern an den beiden Seiten wo die eigentliche "Page" aufhört. So hab ich das auf jedenfall verstanden und somit wäre der #container sein Anhaltspunkt.

Julia²

Und gerade deswegen muss der Hintergrund im BODY platziert werden. Den der Container "überdeckt" den Body. Somit geht der Hintergrund unter dem Container durch und ist auf beiden Seitem zu sehen - nur nicht im Container - logisch!

Oder hab ich gerade einen Denkfehler? :-)

Merz Manuel

Zitat von Julia²

Und gerade deswegen muss der Hintergrund im BODY platziert werden. Den der Container "überdeckt" den Body. Somit geht der Hintergrund unter dem Container durch und ist auf beiden Seitem zu sehen - nur nicht im Container - logisch!

Oder hab ich gerade einen Denkfehler? :-)

Ich denke ja :mrgreen:

Schau dir diesbezüglich mal eine meiner Seiten an: Willkommen bei der Carrosserie Lang

Da siehst du das der BODY Tag zwar einen Hintergrund hat, jedoch nicht den welcher den Content umgibt. Im Body ist lediglich die Mustergrafik vom Hintegrund definiiert.
Der eigentliche Container welche die Seite umfasst heisst Page und erhält ebenfalls eine Hintergrundgrafik zum darstellen der beiden Schattenränder.

Code

body{
    margin:0px;
    padding:0px;
    margin-top: 10px;
    background: #7A7D83 url(images/body.jpg) top center repeat;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
}
#page{
    margin: 0px auto;
    padding: 0px;
    width:784px;
    background:#7A7D83 url(images/page.jpg) top center; 
}

Alles anzeigen

Die Grafik für den Hintergrund sieht dann so aus.

[Blockierte Grafik: http://www.car-lang.ch/images/page.jpg]

Julia²

Ähm das wusste ich nicht, mir ging es jetzt aber darum, irgendeinen Hintergrund auszugeben der sich z.b immer wieder wiederholt etc.!

Merz Manuel

Achso, ja dann genügt es sicherlich das in den BODY Tag zu schreiben :)

gossipgirlz

Ich habe es damit

PHP

body 
{
        background:url(http://www.gossipgirlz.de/wp-content/bg.jpg) no-repeat top center;
    margin: 0px; 
       
}

gelöst.

Nun will ich natürlich noch ganz dringend, dass der Hintergrund unten fließend mit der dunklen Farbe weiterläuft. Muss ich da das Bild verlängern - oder hab ich ne andere Möglichkeit??

gossipgirlz

Und - P.S.: Wieso gehen hier eigentlich immer alle davon aus, dass man ein "er" ist? Tsts...

gossipgirlz

Hab jetzt doch das Hintergrundbild nach unten verlängert.
Dummerweise hab ich es zu stark komprimiert und es ist pixelig... arghs. naja... die ganze prozedur dann morgen noch einmal. :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Blog-Hintergrund - wie?

Jetzt mitmachen!