Background-image (size:cover Einstellung)

boogy

Hallo,

wie kann ich eine klasse oder div für background-image einfügen ?

Beispiel ich habe das gemacht :
https://codex.wordpress.org/Custom_Backgrounds

Alles funktioniert auch Super!

Ich habe jetzt diese div.class in Frontend :

HTML

body.custom-background

Möchte aber nur für zentriert Bild die unteren css angaben mit eingeben, damit ich full-size habe.

HTML

-webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important;

So sieht es dann bei allen aus:

HTML

body.custom-background {
     background-attachment: fixed;
      background-image:  url("http://demo.oneway-dienstleistungen.de/wp-content/uploads/revslider/highlight-showcase/newscarousel4.jpg");
     background-position: center top;
     background-repeat: no-repeat;
    -webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important;
}

Theroretisch klappt ja alles es werden aber alle Klassen mit body.custom-background mit angegeben.

Ich möchte aber gerne das es nur bei den zentrierten Bild so ist.
Bei den anderen z.B Wiederholungen sollten keine Size angaben gemacht werden (für BG pattern z.B)

Ich suche seit heute morgen wie verrückt danach, wenn sich jemand mit php auskennt oder ein Link hat wo ich wie ich body.custom-background Klasse mit zentriertes bild eigene klasse zuweisen kann wäre ich dankbar.

Tausenddank an Euch allen.

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

Monika

wo und wie weißt du wann es ein zentriertes Bild ist?

welches Bild "zentriert" => im Editor eingefügte?
wenn ja, dann nutz deren CSS Klasse um dein CSS zu spezialisieren..

HTML

.custom-background     .classdeszentriertenBildes{


....

helix

Wer lesen kann, ist klar im Vorteil.
Auf der von dir verlinkten Seite im Codex steht klar und deutlich, was add_theme_support( 'custom-background' ); macht (und damit auch, was nicht).

Es stellt dir eine Custom-Background-Seite im Admin-Bereich zur Verfügung.
Und es stellt dir ein benutzerdefiniertes Stylesheet zur Verfügung, das das Stylesheet deines Themes überschreibt.
Weiterhin zeigt es damit, dass die Body-Class .custom-background eingebunden ist, dass auch alle anderen Standard-WP-Body-Classes eingebunden sind. => Mit denen kannst du arbeiten und seitenspezifische Hintergründe definieren.

Gruß
helix

boogy

Lesen und Verstehen das ist ja mein problem. ich check das nicht :D

Monika: die klasse .classdeszentriertenBildes hab ich ja nicht und kann es auch nicht einfügen genau das meine ich!

@ helix : add_theme_support( 'custom-background ' ...und es stellt dir ein benutzerdefiniertes Stylesheet zu Verfügung...
genau aber immer nur mit .custom-background

Beispiel: bei den Bild Optionen im Backend : Wiederholung, Wiederholung vertikal, Wiederholung Horizontal, keine Wiederholung

Ich möchte nur bei keine Wiederholung das das Bild bei den CSS Eigenschaften auf bg-size:cover gesetzt wird.
Bei den alle anderen ist es unnötig.

Wie kann ich es so einstellen wie es Monika schon gesagt hat das ich eine eigene Klasse nur für Wiederholungen oder zentriertes Bild ausgeben kann.
Weil egal was ich einstellen ich nur eine einzige klasse zu Verfügung habe und diese klasse gilt für alle egal welche Einstellung.
und das fängt immer so an:

HTML

body.custom-background

in meiner Function php steht z.B:

HTML

add_theme_support( 'custom-background' );


$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Alles anzeigen

Und genau da liegt mein problem ich kenn mich da null aus.

Herzlich Vielen Dank

helix

Zitat von boogy

Lesen und Verstehen das ist ja mein problem. ich check das nicht :D

Damit kann ich ja sogar noch was anfangen …

Zitat von boogy

Und genau da liegt mein problem ich kenn mich da null aus.

Jetzt aber nicht vor lauter ich-versteh-das-alles-nicht den Kopf in den Sand stecken oder den Verstand beim Einloggen im Forum sonstwo deponieren …

Ja. Du bekommst mit der Einbindung von Custom Background zunächst nur eine weitere Klasse für alle Seiten. Also keine Unterscheidung. Und auch nicht automatisch eine Klasse für zentrierte Hintergrundbilder. Woher soll denn das System wissen, auf welchen Seiten du den Hintergrund so gestalten willst und auf welchen Seiten anders?

Aber: gleichzeitig kriegst du mit custom-background alle WP-Body-Classes (hallo, hier ist das nächste Stichwort zum Nachlesen und Verstehen Lernen). Im schlimmsten Fall kannst du / musst du damit über die ID der Seite / des Beitrags für jede Seite einen eigenen Hintergrund definieren. Möglicherweise kannst du aber auch Vorkommen zusammenfassen: Bei WordPress gibt es eine Systematik, nach der diese Body-Classes zugewiesen werden, z.B. eine eigene Body-Class für Seiten, eine für Beiträge, etc. In deinem Gestaltungskonzept gibt es möglicherweise auch ein System (das wissen wir nicht, denn darüber hast du uns nichts verraten). Die Kunst liegt darin, beides zusammenzubringen …
Evtl. hilft dir auch die Funktion eigener Body-Classes weiter, denn dort kannst du über Conditional Tags bestimmen, in welchen Fällen welche weiteren Body-Classes vergeben werden.

Möglicherweise brauchst du den Custom Background gar nicht einzubinden. Das hängt (wenn ich nichts übersehe) von zwei Faktoren ab:
1.) Sind in deinem Theme die WP-Body-Classes bereits eingebunden? (Die würden ja ausreichen).
2.) Hast du ein eigenes Theme, ein Child-Theme gemacht oder wenigstens (über ein PlugIn) ein Custom CSS eingebunden?

Wenn du die erste und eine der Fragen aus der zweiten Abteilung bejahen kannst, brauchst du diese custom-background-Einbindung nicht.
Ansonsten ist es nützlich, für diese eigenen Hintergründe das erwähnte benutzerdefinierte Stylesheet zu haben. Und da kannst du ja auch weitere Klassen außer .custom-background eintragen.

Was das Eintragen der default-Einstellungen in der Custom-Background-Funktion angeht: Trage das als Default-Wert(e) ein, was du am häufigsten brauchst – und damit am wenigsten überschreiben musst.
Im Codex, auf der von dir verlinkten Seiten, steht auch immer, was die WordPress-Default-Einstellung ist, wenn du nichts einträgst.

Der Rest ist schlichtes CSS.

Gruß
helix

Nachtrag: ich find’s ja richtig gut, dass du im Codex nachliest.

boogy

Also prinizipiell funktioniert ja alles!

Was ich bisher gemacht habe ist (versuche alles ohne Plugins):
man kann ein logo hochladen
man kann Farben ändern (background und links)
ein Hintergrund Bild einfügen (gesamte Seite)

was ich halt gerne möchte ist Pattern (repeat für x und y )

es ist kein problem wenn ich z.b
body.custom-background{
meine eigene Darstellung definieren möchte
}

Custom Background wurde selber eingebunden, ich habe nur das von codex kopiert und eingefügt.

Ist z.B soetwas möglich ?

HTML

$defaults = array(
 
oder man schreibt hier was rein um eine option für den Background-size zu bekommen ?
'default-size'          => '_custom_background_size',
oder ein Befehl mit id oder class damit es nur für das benutz wird ?








    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Alles anzeigen

VG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Background-image (size:cover Einstellung)

Jetzt mitmachen!