Easy method for placing a Background Image in your Chaturbate BIO

[Sequential]

A recent change in the way that CB has coded the User / Broadcaster BIO page has opened up an easy way to place a background image in the BIO area.

When doing this previously you needed to create a parent holding element in the BIO with the background image, then play with negative margins and custom widths and padding to get it to work properly.
You then put your BIO code inside the element and by the grace of God everything should work.

Now it can be done using just one <p> element placed either in the About Me or Wish List.
It can be placed at the start or end of your normal BIO code.

For example the code below will create a background in the BIO area that is drawn beneath all the usual BIO elements.
To make it pretty I gave it a thin border with rounded corners, and symmetrical spacings to the BIO area border:

<p style="position: absolute; top: 8px; left: 0px; width: calc(100% - 8px); height: calc(100% - 15px); z-index: -1; background: url('https://i.ibb.co/KbcRnhb/BG-01.jpg'); background-size: cover; background-attachment: fixed; background-position: top left; box-sizing: border-box; border: solid 1px #f040c0; border-radius: 8px;"></p>

You can see the result here:
https://chaturbate.com/vindicator_iv


I was in touch with Support asking if the code change was going to be permanent. I was really seeking a Yes or No answer on this but got an automated reply that didn't answer the question.

So, the caveat here is that if you use this code for setting BIO backgrounds and CB revert the change then the code will fail. The worst thing that will happen is that the background will not appear.

Seq.

 

[cbhours]

oooo thank you, ill try to get the cbhours bio maker updated with this new method.

 

[Sequential]

My guess is they altered the code to prevent any items in BIO design area covering essential parts of the CB page.

I have seen BIO designs that use icons and banners set to high z-index values (e.g. 9999). Depending on where they are placed, these graphics can block CB functions like the Thumbs-Up feedback box, the drop-down Followers List, and the DM box.

To solve this issue "z-index: 0;" has been added to the BIO parent element. This creates a child stacking order for the elements in the BIO design, and is separate from the main page stacking order.

No matter what the z-index of items in the BIO area are, the rest of the page will now see the BIO area as a whole with "z-index: 0;". Now none of the CB functions will be covered by rogue icons and graphics in the BIO.

This works in our favour too as our BIO background element is also in the child stacking order. With "z-index: -1" it simply sits behind what is normally visible in the BIO area.


Well, that's my take on it. Hopefully it is mostly correct )))

Seq.

 

[Sequential]

I have created a guide to using this new BIO background method:
Chaturbate BIO Background Image Guide

Seq.

 

[RainForest]

I have created a guide to using this new BIO background method:
Chaturbate BIO Background Image Guide

Seq.

This was very helpful. Thanks a bunch.