0

I am trying to add a custom banner to the SharePoint Online Page (Classic experience). Unfortunately, the banner is overlapping other elements of the page.

This is what I am doing:

  1. Created the code in notepad and saved it as .txt
  2. Uploaded .txt to "Documents" library
  3. Added .txt via the Content Editor Web Part
<div class="container">
  <img src="/sites/XXXX/XXX/testclassic/SiteAssets/SitePages/Home/TEST BANNER.png" width="100%">
  <div class="centerleft">TEST TEXT TEST TEXT TEST TEXT TEST TEXT</div>
</div>
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centerleft {
  position: absolute;
  top: 50%;
  left: 16px;
}
</style>

Output:

enter image description here

2
  • Is this because you set position: absolute; for centerleft class? Try changing its value. Commented Mar 1, 2022 at 9:42
  • Thanks for responding. I changed the position property from absolute to relative, but if I do this, the text is placed below the banner. I would need the text to be placed on the banner. None of the position property values help here. Any other ideas?
    – Lukas
    Commented Mar 1, 2022 at 9:56

1 Answer 1

0

Ok, I managed to fix this. Surprisingly, I just had to change the names of the selectors to something more unique:

<div class="bannersp">
  <img src="/sites/XXXX/XXX/testclassic/SiteAssets/SitePages/Home/TEST BANNER.png" style="width:100%;">
  <div class="bannertext">TEXT TEXT TEXT</div>
<style>
.bannersp {
  position: relative;
  text-align: center;
  color: white;
}

.bannertext {
  position: absolute;
  top: 50%;
  left: 16px;
}
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.