search

dryoo / dokuwiki-template-kajukkd

GNU General Public License v2.0
2 stars 1 forks source link

<body> does not cover the whole vertical page #5

Open Rayaqu opened 1 year ago

Rayaqu commented 1 year ago

Hi, there. Thank you for making this template. I really love it, specially since it is mobile friendly.

So, I am setting different background images across different namespaces. The <body> size is very dependent on the amount of content in the page, and so is the background dependent to the body. If the browser size is bigger than the body, the background image looks cut.

Page with very little content

Page with full content

I don't know the correct way to apply background images for different namespaces, so I follow this CSS code:

.background-properties {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

body[data-page-id^="gaming:"]:not([data-page-id*=":pso2:"]) {
  .background-properties;
  background-image: url('http://localhost/_media/2b-nier-automata-art-0b-3840x2400_1_.jpg');
}

body[data-page-id^="gaming:games:pso2:pso2ngs:"] {
  .background-properties;
  background-image: url('https://mlpnk72yciwc.i.optimole.com/cqhiHLc.IIZS~2ef73/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2021/07/Phantasy-Star-Online-2-Ninth-Anniversary.jpg');
}

For this to work, I also have replaced <body> with <body data-page-id=“<?php echo $ID ?>”> in Line 80 in the main.php file.

If possible, it would be also good for the images, videos, text to have 100% opacity, as the site background can be seen through the images. I am okay with the transparent opacity of the background inside containers.

Rayaqu commented 1 year ago

As a workaround, I added a CSS rule that prevents the image to be cut:

body {
    min-height: 100vh;
}

I don't know if it was intended, but now my site looks beautiful :) I still cannot figure how to force image opacity 100% tho.