Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Main Forum
Developers
Bootstrap template background images
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1
  • 2

TOPIC:

Bootstrap template background images 6 years 4 months ago #4837

  • azandbergen
  • azandbergen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
Is it possible to adjust the background images in the topbanner (frame) per page (tab)?

Please Log in or Create an account to join the conversation.

Bootstrap template background images 6 years 4 months ago #4838

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 234
  • Thank you received: 87
I'm afraid there's no way of doing this at the moment but I'll add it to the wish list as I think this would be a nice feature.

Please Log in or Create an account to join the conversation.

Bootstrap template background images 6 years 4 months ago #4849

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4

Aaldrie Zandbergen wrote: Is it possible to adjust the background images in the topbanner (frame) per page (tab)?


The way I do it is to use a pseudo element for the jumbotron background image, then add the image-specific css to the top of each section.

So, you could add this to apply to the whole project:
.jumbotron::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
}

Then you could add this css to each section, with a different URL for each different background image:
.jumbotron::before {
    background-image: url('...');
    background-size: cover;
    background-position: center;
}

Here's an example (I've adjusted the header so it fills the entire page, but the principle remains the same): xerte.cardiff.ac.uk/play_6542

Please Log in or Create an account to join the conversation.

Bootstrap template background images 6 years 4 months ago #4858

  • azandbergen
  • azandbergen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
Hi Neil,

Thats awesome!

I can add a style to the entire project, but no ccs to the sections. There is only the possibility to add a script. Can you help?

Best regards and
thank you in advance
Aaldrie Zandbergen
Deltion College
Zwolle / The Netherlands
Attachments:

Please Log in or Create an account to join the conversation.

Bootstrap template background images 6 years 4 months ago #4859

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
You can add section level CSS by adding a "New HTML Code..." page. Just add your CSS here but wrap it in <style> </style> tags. Make sure you untick the "Show Title" box.

A bit of a workaround, but it works, and still keeps the CSS sort of separate from the HTML...

Please Log in or Create an account to join the conversation.

Last edit: by Neil Pollock.

Bootstrap template background images 6 years 4 months ago #4860

  • azandbergen
  • azandbergen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 4
  • Thank you received: 0
OK!

I can now adjust the headers of the pages, but how do I get the pictures fullscreen and small when scrolling the page?

Please Log in or Create an account to join the conversation.
  • Page:
  • 1
  • 2
Moderators: JohnSmith
Forum
Main Forum
Developers
Bootstrap template background images
Time to create page: 0.055 seconds
Main Pages
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search