Help Page loaded wrong but would love to keep it

[KageYuuki]

I was working on editing some info/lore pages for one of my threads and went to see how it was looking. When I loaded the page I got this:
The thing is, I think it looks great with the image behind the text. I would love to keep this if possible but I'm not knowledgeable enough with BBCode to know if it's possible or how to even do it.

Anyone have any ideas?

 

[Amerikia1126]

You can set that image as the background for a div, then put the text inside said div.

 

[KageYuuki]

Doesn't div need all the dimensions specified? Do they even play nicely with mobile users? I've never actually seen someone use them yet...

 

[Amerikia1126]

Currently on mobile, and not an expert on divs. Haven't tried setting a large picture as a background yet, so I'm really not sure. I do think it should be possible to set it as a background that scales nicely. Would have to play around with it. Hmm..

 

[KageYuuki]

The image in question is actually a vector. So it'll scale to whatever size I need it to be. I don't even know how it ended up so big in the first place! Haha

 

[IctoraPost]

You can do it with this:
[div=background: url(image-link) no-repeat 50% 50%; background-size: 100%;]TEXT HERE[/div]

Spoiler: Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.

Morbi malesuada ac lectus eu sodales. Nam vel gravida urna, ut porta metus. Donec eu diam viverra, malesuada lectus eu, fermentum libero. Curabitur vestibulum accumsan molestie. Cras non elit semper, luctus erat sed, ornare erat. Aliquam pharetra risus et magna iaculis, id posuere est hendrerit. Donec sit amet est tincidunt, commodo quam vel, bibendum metus. Vestibulum aliquet commodo faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.

Morbi malesuada ac lectus eu sodales. Nam vel gravida urna, ut porta metus. Donec eu diam viverra, malesuada lectus eu, fermentum libero. Curabitur vestibulum accumsan molestie. Cras non elit semper, luctus erat sed, ornare erat. Aliquam pharetra risus et magna iaculis, id posuere est hendrerit. Donec sit amet est tincidunt, commodo quam vel, bibendum metus. Vestibulum aliquet commodo faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.

[div=background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle001.svg/2000px-Recycle001.svg.png) no-repeat 50% 50%; background-size: 100%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.

Morbi malesuada ac lectus eu sodales. Nam vel gravida urna, ut porta metus. Donec eu diam viverra, malesuada lectus eu, fermentum libero. Curabitur vestibulum accumsan molestie. Cras non elit semper, luctus erat sed, ornare erat. Aliquam pharetra risus et magna iaculis, id posuere est hendrerit. Donec sit amet est tincidunt, commodo quam vel, bibendum metus. Vestibulum aliquet commodo faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.

Morbi malesuada ac lectus eu sodales. Nam vel gravida urna, ut porta metus. Donec eu diam viverra, malesuada lectus eu, fermentum libero. Curabitur vestibulum accumsan molestie. Cras non elit semper, luctus erat sed, ornare erat. Aliquam pharetra risus et magna iaculis, id posuere est hendrerit. Donec sit amet est tincidunt, commodo quam vel, bibendum metus. Vestibulum aliquet commodo faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id sollicitudin diam, id auctor augue. Suspendisse scelerisque fermentum ex non semper. Vestibulum ac pharetra ex. Sed iaculis euismod nisl et faucibus. In nec iaculis turpis, nec varius mi. Aliquam vitae consectetur tortor. Maecenas turpis quam, euismod at condimentum tempus, pulvinar id ante. Donec vel semper magna. Aliquam erat volutpat. Sed ac metus eleifend, laoreet arcu ac, semper risus. Curabitur ac velit eget sem scelerisque feugiat. Nam porttitor nibh ac diam interdum, vel rhoncus lorem interdum. Sed ultricies sodales accumsan.

Pellentesque sagittis a sem quis dapibus. Phasellus justo justo, dapibus non rhoncus sit amet, faucibus ac ipsum. Aenean imperdiet arcu in vehicula pharetra. Aliquam at ullamcorper orci. Aliquam commodo dui velit, eu lobortis nisi maximus dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat magna nec lorem rutrum rhoncus. Proin venenatis, arcu a rutrum ullamcorper, odio nibh convallis urna, eu tincidunt massa ligula id eros. Vivamus elementum imperdiet tortor. Aenean id ex nec dui feugiat vestibulum quis eget lacus. Phasellus sed tempor turpis. Pellentesque quis fringilla est, eu posuere turpis. Nunc facilisis, magna id consectetur rutrum, urna urna viverra libero, ut dictum orci tellus nec mauris. Pellentesque magna enim, pharetra varius condimentum aliquet, dapibus at massa. Nunc lobortis lectus quam, sed malesuada purus aliquam sit amet.

Praesent accumsan sapien auctor enim congue, quis tincidunt lorem euismod. Vivamus tincidunt ut massa nec molestie. Nullam interdum, massa eu pharetra aliquam, velit dolor pellentesque velit, ac facilisis neque dolor vitae quam. Curabitur tincidunt erat eget leo sodales, in molestie ipsum varius. Cras at venenatis est. Vestibulum mi tortor, rhoncus at lacus nec, bibendum porttitor arcu. Quisque rutrum aliquam elit, at tempor lorem efficitur nec. Nunc ut nunc magna. Sed fringilla, arcu ut elementum convallis, mauris massa aliquet mauris, quis faucibus diam massa eget metus.

Nunc quis congue dolor. Aenean rutrum vestibulum imperdiet. Cras vulputate eleifend est a consectetur. Nulla a congue neque, porttitor luctus nisl. Suspendisse laoreet magna faucibus velit malesuada congue. Aliquam erat volutpat. Pellentesque vulputate lectus elit. Nam aliquet lacus dui, eu porta odio rhoncus eget. Duis sit amet felis sem. Maecenas porta quam ac ultricies hendrerit.[/div]

It should scale with any screen size no problem.

 

[KageYuuki]

Nice, I'll give it a try

 

[KageYuuki]

Had to tweak the background-size option a smidge but it works! Thanks guys!