如何在页面上应用背景？

我想在我的网站的页面上应用不同的背景。如何在页面上应用背景？

下面的代码适用于硬后台的所有产品页：

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

如何在页面上应用背景？

回答

相关问题