Trying to create a background that repeats and scrolls

What I’m trying to do

I’m trying to make a background image that scrolls and repeats, so that it loops, I’m so burnt out that I can’t even explain this well anymore.

Things I have tried

I’ve tried youtube, google, duckduckgo, reddit, the discord, random discord servers that had programming channels, chatGPT, and randomly changing variables. the only thing that’s changed is it DOES repeat but it doesn’t scroll.

here’s the code I have so far

.workspace-leaf-content[data-type="markdown"] {
  position: relative; /* Make sure that the entire area is positioned relatively*/
}

.workspace-leaf-content[data-type="markdown"] .view-content {
  position: relative; /* Make sure that the View-Content-area is positioned relatively */
  z-index: 0; /* Set the z-index to 0 to place the background layer below */
}

.workspace-leaf-content[data-type="markdown"] .view-content::after {
  content: "";
  position: absolute; /* Absolutely positioned within the relative parent element */
  z-index: -1; /* Set the z-index to -1 to place the pseudo-element behind the content */
  background-image: url(https://texturelabs.org/wp-content/uploads/Texturelabs_Paper_353S.jpg); /* Background image */
  background-repeat: repeat-y; /* Repeat vertically */
  background-size: 1400px auto;
  left: 0; /* Allignment */
  top: 0; /* Allignment */
  right: 0; /* Allignment */
  bottom: 0; /* Allignment */
}

I’ve finally got a solution after help through the discord.

.markdown-reading-view {
    overflow-y: auto;
}

.markdown-preview-view {
    overflow: visible;
    height: unset;
}


/* Live Preview specific */

.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
    padding: 0;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
    margin-inline: 0;
    max-width: unset;
    padding: var(--file-margins);
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > * {
    width: 100%;
    max-width: var(--file-line-width);
    margin-left: auto;
    margin-right: auto;
}

/* Both (actual background) */

.markdown-preview-view,
.cm-sizer {
    background-image: url(https://texturelabs.org/wp-content/uploads/Texturelabs_Paper_353S.jpg);
    background-repeat: repeat-y;
    background-size: 100% auto; /* remove/change this line for different size of the image */
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.