How to apply a background on a page?

Question

I want to apply different background on the pages of my site.

The following code applies a hard background to all product pages :

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

I want a different background to be applied for the product/add/produit path. How to do this ?

Screenshot :

enter image description here

In my theme I created a file "html--product--add.html.twig" and I pasted in the contents of "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>

How to put the class "body.path-product-add" in this file ?

Do you mean for all products, or for each individual product, dynamically? — Kai, Aug 14 '17 at 01:41
@Kai The background is already applied to all products with the code above. But I want to apply a different background on the product creation page. The path is on the screenshot. — ZenImagine, Aug 14 '17 at 02:00
If you are using the same class name, that's expected to happen, create another class like body.path-product-create {background-image:...} and add this class to product creation page — Mindless, Aug 14 '17 at 02:11

score 0 · Answer 1 · answered Aug 14 '17 at 02:34

0

Hello @ZenImagine,

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

If I am on your part, I will use jquery to make the specific page' body background different. See below code. It works for me.

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

answered Aug 14 '17 at 02:34

bellabelle

908
7
13

`@ZenImagine`: I am not familiar with Drupal code. But, you can refer this link to help you: https://www.drupal.org/node/2634364 – bellabelle Aug 15 '17 at 03:39

score 0 · Answer 2 · answered Aug 14 '17 at 06:08

0

If you just need to replace the background image in a static site you can simply do it with a small piece of jQuery:

jQuery

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

However, in case you are working in a dynamic site, I'd definitely vote for Mindless answer.

answered Aug 14 '17 at 06:08

Tedds

312
2
6

Sorry @ZenImagine, I couldn't say. I guess it might be a way to bring in the background images dynamically from the database, but I don't have any experience in Drupal. – Tedds Aug 14 '17 at 17:37
Thank you, but I found a solution here https://stackoverflow.com/questions/45620270/android-chrome-background-with-background-size-cover – ZenImagine Aug 15 '17 at 08:34

How to apply a background on a page?

2 Answers2