Wie man einen Hintergrund auf einer Seite anwendet?

Ich möchte einen anderen Hintergrund auf den Seiten meiner Website anwenden.Wie man einen Hintergrund auf einer Seite anwendet?

Der folgende Code gilt ein Fest Hintergrund für alle Produktseiten:

body.path-product { 
    background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/background-page.svg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
}

Ich möchte einen anderen Hintergrund für das Produkt/add/produit Pfad angewendet werden. Wie macht man das ?

Screenshot:

enter image description here

In meinem Thema habe ich eine Datei "html - Produkt - add.html.twig" und ich in den Inhalt von "html.html.twig" eingefügt.

{# 
/** 
* @file 
* Default theme implementation to display the basic html structure of a single 
* Drupal page. 
* 
* Variables: 
* - $css: An array of CSS files for the current page. 
* - $language: (object) The language the site is being displayed in. 
* $language->language contains its textual representation. 
* $language->dir contains the language direction. It will either be 'ltr' or 
* 'rtl'. 
* - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document. 
* - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data. 
* - $head_title: A modified version of the page title, for use in the TITLE 
* tag. 
* - $head_title_array: (array) An associative array containing the string parts 
* that were used to generate the $head_title variable, already prepared to be 
* output as TITLE tag. The key/value pairs may contain one or more of the 
* following, depending on conditions: 
* - title: The title of the current page, if any. 
* - name: The name of the site. 
* - slogan: The slogan of the site, if any, and if there is no title. 
* - $head: Markup for the HEAD section (including meta tags, keyword tags, and 
* so on). 
* - $styles: Style tags necessary to import all CSS files for the page. 
* - $scripts: Script tags necessary to load the JavaScript files and settings 
* for the page. 
* - $page_top: Initial markup from any modules that have altered the 
* page. This variable should always be output first, before all other dynamic 
* content. 
* - $page: The rendered page content. 
* - $page_bottom: Final closing markup from any modules that have altered the 
* page. This variable should always be output last, after all other dynamic 
* content. 
* - $classes String of classes that can be used to style contextually through 
* CSS. 
* 
* @ingroup templates 
* 
* @see bootstrap_preprocess_html() 
* @see template_preprocess() 
* @see template_preprocess_html() 
* @see template_process() 
*/ 
#} 
{% 
    set body_classes = [ 
    logged_in ? 'user-logged-in', 
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class, 
    node_type ? 'page-node-type-' ~ node_type|clean_class, 
    db_offline ? 'db-offline', 
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position, 
    theme.has_glyphicons ? 'has-glyphicons', 
    ] 
%} 
<!DOCTYPE html> 
<html {{ html_attributes }}> 
    <head> 
    <head-placeholder token="{{ placeholder_token|raw }}"> 
    <title>{{ head_title|safe_join(' | ') }}</title> 
    <css-placeholder token="{{ placeholder_token|raw }}"> 
    <js-placeholder token="{{ placeholder_token|raw }}"> 
    </head> 
    <body{{ attributes.addClass(body_classes) }}> 
    <a href="#main-content" class="visually-hidden focusable skip-link"> 
     {{ 'Skip to main content'|t }} 
    </a> 
    {{ page_top }} 
    {{ page }} 
    {{ page_bottom }} 
    <js-bottom-placeholder token="{{ placeholder_token|raw }}"> 
    </body> 
</html>

Wie wird die Klasse "body.path-product-add" in diese Datei eingefügt?

Quelle

2017-08-14 ZenImagine

Meinst du das für alle Produkte oder für jedes einzelne Produkt dynamisch? – Kai

@Kai Der Hintergrund wird bereits auf alle Produkte mit dem obigen Code angewendet. Ich möchte jedoch einen anderen Hintergrund auf der Produkt-Erstellungsseite anwenden. Der Pfad befindet sich auf dem Screenshot. – ZenImagine

Wenn Sie den gleichen Klassennamen verwenden, was erwartet wird, erstellen Sie eine andere Klasse wie body.path-product-create {background-image: ...} und fügen Sie diese Klasse zur Produkterstellungsseite hinzu. – Mindless

Hallo @ZenImagine,

You can use another class for your body that corresponds that page.

Wenn ich auf Ihrer Seite bin, werde ich jquery verwenden die spezifische Seite‘Körper Hintergrund unterschiedlich zu machen. Siehe untenstehenden Code. Für mich geht das.

JQUERY

$(window).load(function(){ 
var x = window.location.href; 
    if(x == "full path link of the specific page"){ 
     $('body').addClass('productback'); 
    } 
});

CSS

body.productback{ 
background-image: url("your background image") !important; 
}

Quelle

2017-08-14 02:34:18 bellabelle

Ich habe meine Frage aktualisiert. – ZenImagine

'@ ZenImagine': Ich bin nicht mit Drupal-Code vertraut. Aber, Sie können diesen Link verweisen, um Ihnen zu helfen: https://www.drupal.org/node/2634364 – bellabelle

Wenn Sie nur das Hintergrundbild in einer statischen Website ersetzen möchten, können Sie einfach tun Sie es mit einem kleinen Stück jQuery:

jQuery

$('.path-product').css('background-image', 'url("https://www.w3schools.com/css/img_fjords.jpg")');

Wenn Sie jedoch auf einer dynamischen Website arbeiten, würde ich definitiv für die Mindless-Antwort stimmen.

Quelle

2017-08-14 06:08:18 Tedds

Ich habe meine Frage aktualisiert. – ZenImagine

Sorry @ZenImagine, konnte ich nicht sagen. Ich denke, es könnte eine Möglichkeit sein, die Hintergrundbilder dynamisch aus der Datenbank zu holen, aber ich habe keine Erfahrung in Drupal. – Tedds

Danke, aber ich habe hier eine Lösung gefunden https://stackoverflow.com/questions/45620270/android-chrome-background-with-background-size-cover – ZenImagine

Wie man einen Hintergrund auf einer Seite anwendet?

Antwort

Verwandte Themen