The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Bootstrap template background images

  • azandbergen
  • Onderwerp Auteur
  • Offline
  • Nieuw lid
  • Nieuw lid
Meer
8 jaren 8 maanden geleden #4837 door azandbergen
Bootstrap template background images werd gestart door azandbergen
Is it possible to adjust the background images in the topbanner (frame) per page (tab)?

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 8 maanden geleden #4838 door Fay
Beantwoord door Fay in topic Bootstrap template background images
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.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 8 maanden geleden #4849 door Neil Pollock
Beantwoord door Neil Pollock in topic Bootstrap template background images

Aaldrie Zandbergen schreef : 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:
Code:
.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:
Code:
.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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • azandbergen
  • Onderwerp Auteur
  • Offline
  • Nieuw lid
  • Nieuw lid
Meer
8 jaren 8 maanden geleden #4858 door azandbergen
Beantwoord door azandbergen in topic Bootstrap template background images
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
Bijlagen:

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 8 maanden geleden - 8 jaren 8 maanden geleden #4859 door Neil Pollock
Beantwoord door Neil Pollock in topic Bootstrap template background images
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...
Laatst bewerkt 8 jaren 8 maanden geleden door Neil Pollock.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

  • azandbergen
  • Onderwerp Auteur
  • Offline
  • Nieuw lid
  • Nieuw lid
Meer
8 jaren 8 maanden geleden #4860 door azandbergen
Beantwoord door azandbergen in topic Bootstrap template background images
OK!

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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith
Tijd voor maken pagina: 0.196 seconden
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo