Header und Footer Grafik

[mKorniK]

Hallo,
ich hoffe mir kann einer weiterhelfen.

Ich möchte gerne in den Header und Foote eine Hintergrundgrafik einfügen, die sich jeweils auch an die abgerundeten Ecken hält.

Jeder meiner Versuche schlug fehl in der Suche habe ich leider nichts verwertbares für mich gefunden.

Hier ein Auszug aus meiner Custom.css

/* aussenabstaende */
#outer_wrapper, #header { padding-top: 15px; padding-left: 15px; padding-right: 15px; background: #fff; /*border-left: 15px solid #fff; border-right: 15px solid #fff;*/ }
#outer_wrapper { overflow:hidden; }
#footer { padding: 15px; }
#speciallinks { padding: 0 15px; border-radius: inherit;}
#settings { right: 15px; top: 0; }
/* 960px Shop-Breite, damit Darstellung bei 1024 okay ist */
.page_width {  width: 1080px; }
body, #page, #footer_wrapper { background: #31313A none; }
#outer_wrapper { margin-top: 0; }
#header { padding-top: 12px; }
.panel_left #content { padding-left: 20px; }
.panel_right #content { padding-right: 20px; }
#logo { z-index: 200; top: 10px; }
/*Textbereich Schatten */
#outer_wrapper {
        -moz-box-shadow: 5px 5px 5px #888;
        -webkit-box-shadow: 0px 0px 0px #888;
        box-shadow: 0px 0px 10px #ccc;
        border-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
}
/* basic colors */
#headlinks_wrapper, #page_wrapper { background: #fff none; }
html, body { color: #4a4a4a; }
a, a:visited, a:link { color: #b53a6b; }
#configset ul.semtabs li.active a { background-color: #694b61; color: #fff; }
/* Header */
#header { height: 240px; }
#headlinks_wrapper { margin: 0px; }
#headlinks_wrapper {
    margin: 0px;
    z-index: inherit;
}
/* Abstand Bildschirm oben und unten */
/* ------   ABSTAND START   ------  */
#header_wrapper {
 padding-top: 15px;
}
#footer_wrapper {
 padding-bottom: 15px;
}
/* ------   Abstand ENDE   ------  */
/*Rundungen vom Header */
/* ------   Header_Rundung START   ------  */
#header {
    border-radius: 15px 15px 0px 0px;
    -moz-border-radius: 15px 15px 0px 0px;
    -webkit-border-radius:15px 15px 0px 0px;
    -khtml-border-radius: 15px 15px 0px 0px;
    background-color: #ffffff;
    font-size: 0.9em;
    color: #666;
    line-height: 20px;
    width: 1080px; 
    /* Schatten um Header */ 
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 0px 0px 0px #888;
    box-shadow: 0px 0px 10px #ccc;
}
/* ------   Header_Rundung ENDE   ------  */

#footer {
 background-color: #FFFFFF;
  -moz-box-shadow: 5px 5px 5px #888;
     -webkit-box-shadow: 0px 0px 0px #888;
      box-shadow: 0px 0px 10px #ccc;
}
 
/* ------   Copyright_FOOTER START   ------  */
#footer .master {
    border-radius: 0 0 0px 0px;
    -moz-border-radius: 0 0 0px 0px;
    -webkit-border-radius: 0 0 0px 0px;
    -khtml-border-radius: 0 0 0px 0px;
    background-color: #f5f5f5;
    font-size: 0.9em;
    color: #666;
    line-height: 20px;
}
/* ------   Copyright_FOOTER ENDE   ------  */
/*Headlinks = Facebook Balken inkl. Suche */
/* ------   Headlinks START   ------  */
#headlinks {
    min-height: 40px;
    background-color: #fafafa;
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2) );
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    background-repeat: repeat-x;
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0 );
    *zoom: 1;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
    z-index: inherit;
}
#headlinks>ul>li>a {
    color: #555;
    font-size: 1.1em;
    text-shadow: 0 1px 0 white;
    display: block;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    background-color: transparent;
}
#headlinks::before,#headlinks::after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
}
#headlinks li {
    padding: 0;
}
#headlinks>ul>li>a,#headlinks>ul>li>a:hover {
    line-height: 20px;
    margin-top: 0;
    padding: 10px 15px 10px;
    line-height: 20px;
    height: auto;
}
#headlinks>ul>li>a:hover {
    color: #333;
}
#headlinks>ul>li>a:hover,#headlinks>ul>li.current>a {
    background-color: transparent;
}
#headlinks>ul>li.current>a {
    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

 

[JayJayS]

AW: Header und Footer Grafik

Da abgerundete Ecken nicht von jedem Browser unterstützt wird, wirst du wohl ein Hintergrundbild mit entsprechend abgerundeten Ecken verwenden müssen...
Wie du dieses über CSS dann einfügst, ist dir aber bekannt...? Wenn nicht, solltest du dir ein wenig CSS-Basiswissen aneignen. Denn nur wenn du weißt was du da überhaupt machst, fragst du das selbe in ein paar Wochen nicht wieder...

Abgesehen davon, was willst du mit derartigem Oldschool-Template-Design ? Das hat man vor 10 Jahren so gemacht ! Ein zeitgemäßes Shopdesign kommt ohne solche "Gehilfen" aus... Insbesondere Mobile-Nutzer werden es danken...

 

[ARA-Marketing]

AW: Header und Footer Grafik

Hi,
also... für den Header brauchst du die Klasse #header {....
für den Footer die Klasse #footer {....

Eingebunden wird das Bild jeweils über die Funktion-> background: transparent url(order/deinhintergrund.jpg) top center no-repeat;

Um es wirklich sicher zu machen, runde deine Grafik an den Ecken selber ab...oder eben auch per css

so jetzt aber das was "JayJayS" schon gesagt hat..... CSS Basiswissen ist unbedingt von Nöten... sonst kommt nix richtiges raus.


Beste Grüße
Eas