如何在頁面上應用背景？

我想在我的網站的頁面上應用不同的背景。如何在頁面上應用背景？

下面的代碼適用於硬後臺的所有產品頁：

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; 
}

我要應用於產品不同的背景/添加/ produit路徑。這個怎麼做？

截圖：

enter image description here

在我的主題我創建了一個文件「的HTML - 產品 - add.html.twig」我在「html.html.twig」的內容粘貼。

{# 
/** 
* @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>

如何把類「body.path-product-add」放在這個文件中？

來源

2017-08-14 ZenImagine

是指所有產品或每個產品的動態？ – Kai

@Kai背景已經應用於所有帶有上述代碼的產品。但我想在產品創建頁面上應用不同的背景。路徑在屏幕截圖上。 – ZenImagine

如果您使用的是相同的類名，預計會發生，請創建另一個類，如body.path-product-create {background-image：...}並將此類添加到產品創建頁面 – Mindless

你好@ZenImagine，

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

如果我是你的一部分，我將使用jQuery使特定頁面的身體背景不同。見下面的代碼。這個對我有用。

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; 
}

來源

2017-08-14 02:34:18 bellabelle

我已更新我的問題。 – ZenImagine

'@ ZenImagine'：我不熟悉Drupal代碼。但是，你可以參考這個鏈接來幫助你：https://www.drupal.org/node/2634364 – bellabelle

如果您只需要更換一個靜態的網站上的背景圖片，你可以簡單地做一小塊的jQuery：

jQuery

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

但是，如果你在一個動態網站工作，我肯定會投票無意識的答案。

來源

2017-08-14 06:08:18 Tedds

我已經更新了我的問題。 – ZenImagine

對不起@ZenImagine，我不能說。我想這可能是一種從數據庫中動態獲取背景圖像的方式，但我在Drupal中沒有任何經驗。 – Tedds

謝謝，但我在這裏找到了解決方案 https://stackoverflow.com/questions/45620270/android-chrome-background-with-background-size-cover – ZenImagine

如何在頁面上應用背景？

回答

相關問題