Images behind text
This container places a background image behind a paragraph of text.
Utility
This adds some flavor to a text, but without the image taking up too much space or the automatic credits distracting from the content.
Without the artist credits you should use some other way to state who made the background image. I recommend a note in the page footer, or something like "unless otherwise specified, all art is made by myself" in the global copyright section.
Manufacturing
The Content
Where to insert it
Anywhere you can use BBCode and containers.What to insert
Wrap the text that you want to decorate inside a container. Its class should identify the background image so that you can remember what it does.[container:bg-scidechse]Lorem ipsum yadda yadda et cetera and so on...[/container]
The Background Image
Upload the desired background image to your world. I recommend a PNG with a transparent background. To ensure that the text will be readable later, this image's colors should contrast sufficiently with the text color. You can also upload a version with low opacity which will blend into your regular page background.The CSS to make it work
Setting the Background
Assign the image in question as the background of the container. Go to the image under "Images & Files" and view it full-size so that you can right-click and copy its URL to the CSS. Disable repeating and set the position to center. To avoid cropping the image, I also recommend setting the minimum size to the image's dimensions.
.user-css .bg-scidechse{
background-image:url(*insert copied URL here*);
background-position:center;
background-repeat: no-repeat;
min-height:300px;
min-width:300px;
}
background-image:url(*insert copied URL here*);
background-position:center;
background-repeat: no-repeat;
min-height:300px;
min-width:300px;
}
Aligning the Text
To center the text vertically and horizontally, add the following properties to the class CSS.
.user-css .bg-scidechse{
background-image:url(*insert copied URL here*);
background-position:center;
background-repeat: no-repeat;
min-height:300px;
min-width:300px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
background-image:url(*insert copied URL here*);
background-position:center;
background-repeat: no-repeat;
min-height:300px;
min-width:300px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
Making the Text more readable
If the text is hard to read on your background image, you can add a text shadow to make it stand out more. You can amplify the effect by using multiple shadow layers.
.user-css .bg-scidechse{
...
text-shadow:
-2px -2px 5px black, -2px 2px 5px black,
2px 2px 5px black, 2px -2px 5px black;
}
...
text-shadow:
-2px -2px 5px black, -2px 2px 5px black,
2px 2px 5px black, 2px -2px 5px black;
}
Access & Availability
Grandmaster
Complexity
Container, CSS
Discovery
idea while re-decorating my homepage on The Kaleidoscope System
Lizard.
Let's go for a longer text.
Lorem ipsum dolor sit amet
yadda yadda et cetera
and so on...
Lorem ipsum dolor sit amet
yadda yadda et cetera
and so on...
Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
..." " "
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
"Once upon a time, there was a man. The man had seven sons. The seven sons said: "Father, tell us a story!" And the man began:
..." " "
Comments