Contrib.social

How to create an image background?

Open on Drupal.org →
Created on 4 January 2024, 6 months ago
Updated 20 February 2024, 4 months ago

Problem/Motivation

I have seen a few questions about this for the 7.x branch, and none of the answers seem to apply to the 8.x branch.
What I'm trying to create is something like this: https://www.drupal.org/files/project-images/bg_final.png → . Preferably with a sliding background.

If I create a slick carousel on desktop I can get a background slide with text overlaid on top of it. But when switching to mobile, the text moves below the image.

Fullscreen gives me the desired effect but it is indeed fullscreen and it no longer allows people to scroll or see any of the other regions of the page. I have read this may be able to be solved via CSS but I don't see how.

I have seen references to the "use CSS background" option but I don't see that option anywhere except when I set the image (media) field to "blazy" but then the caption field and title field no longer render so all I get is the image as a background but no text displayed.

I have installed the example module, I have checked out the various configurations of the blocks but I don't find any answers there.

Any guidance would be greatly appreciated.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Fixed

Version

2.0

Component

Documentation

Created by

🇹🇭Thailand AlfTheCat

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @AlfTheCat
  • Status changed to Fixed 5 months ago
  • Comment 5 months ago →
    🇮🇩Indonesia gausarts

    Thank you.

    I hope you can make it one way or another :)

    I hardly worry about CSS issues with custom works.
    You may want to learn the CSS yourself, or hire a themer if you can afford one.

    > ..on desktop I can get a background slide with text overlaid ... I have read this may be able to be solved via CSS but I don't see how.
    Yes, CSS is the way to go as you said it works fine on desktop.
    You can override the module libraries as noted here https://www.drupal.org/node/2497313 → , or just put your custom CSS overrides in your theme. Your theme will always win if you do it correctly.

    For how, you can press F12, and start inspecting the relevant elements and their CSS rules which make them overlaid and clone the rules to your global CSS perhaps with some media query for better displays.

  • Comment 5 months ago →
    🇹🇭Thailand AlfTheCat

    Thanks for the reply, I think something is not properly working with my Slick setup, thumbnail navigation is also not working. I don't have any errors in the log or the console but some of the example views are also not working as expected. I had Slick working on older versions (10.1.x) of Drupal but on a fresh 10.2.x install it's giving me issues. I've used another slider for now, I hope to be able to investigate further what is causing parts of Slick to not work.

  • Comment 4 months ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024