Prophet's Chaturbate BIO Background Image Guide
Introduction
Recently Chaturbate made a small change in their Broadcaster Page layout code. This change was made to prevent graphics and icons in BIO designs from covering essential parts of the broadcaster's page.
These graphics are usually Social Media, OnlyFans, Fansly, CB Hours or CB Explorer Icons that have been poorly positioned.
Poorly positioned graphics could block these functions:
Due to this code change we can now place a background image in the full BIO area using a simple method.
Previously we needed to create a parent holding element in the BIO with the background image, play with negative margins and custom widths and padding, then put your main BIO code within it. This could be quite stressful if you were just starting out in BIO design.
Now a background image can be placed using just one <p> element placed either in the About Me or Wish List boxes.
It can be placed at the start or end of your normal BIO code block.
The background image will sit under all the usual Chaturbate BIO information, Photo & Video Sets, and Social Media Links.
This guide is part of Prophet's Cam Guide List
Recently Chaturbate made a small change in their Broadcaster Page layout code. This change was made to prevent graphics and icons in BIO designs from covering essential parts of the broadcaster's page.
These graphics are usually Social Media, OnlyFans, Fansly, CB Hours or CB Explorer Icons that have been poorly positioned.
Poorly positioned graphics could block these functions:
- Thumb-Up & Thumb-Down Feedback Box
- Tool-Tip messages for Feedback and Follow Buttons
- Drop-Down Following List (if room offline)
- DM Message Box
Due to this code change we can now place a background image in the full BIO area using a simple method.
Previously we needed to create a parent holding element in the BIO with the background image, play with negative margins and custom widths and padding, then put your main BIO code within it. This could be quite stressful if you were just starting out in BIO design.
Now a background image can be placed using just one <p> element placed either in the About Me or Wish List boxes.
It can be placed at the start or end of your normal BIO code block.
The background image will sit under all the usual Chaturbate BIO information, Photo & Video Sets, and Social Media Links.
This guide is part of Prophet's Cam Guide List
Background Image Example:
The BIO screenshot below shows a background image positioned behind all the other BIO information.
The background image will fill all the BIO area either when the browser is fullscreen, or when the window size is reduced.
It will always be in view in any scroll position when using long page BIO layouts.
The background image used in the screen shot was hosted on ImgBB.
You can view it directly here: https://i.ibb.co/KbcRnhb/BG-01.jpg
The BIO Background Image Code:
You can test it in your own BIO by copying and pasting it into either your About Me or Wish List information box.
You may want to change the background image to one of your choice. To do this you will need to upload your background image to an image hosting site and change the image link.
In this example I used ImgBB for the image hosting.
After you upload your own image to the hosting site you will need to change the image link in the code to your image link:
From: background: url('https://i.ibb.co/KbcRnhb/BG-01.jpg')
To: background: url('your_image_link')
In the BIO background image example I have used additional code to center the background image in the BIO area, created rounded corners, and set a thin red border around it.
In the next section I will explain what each part of the code does. This will give you an idea how to customize it for your liking.
Note: I would advise using light coloured backgound images for your BIO. Darker images may hide your BIO information text.
The BIO screenshot below shows a background image positioned behind all the other BIO information.
The background image will fill all the BIO area either when the browser is fullscreen, or when the window size is reduced.
It will always be in view in any scroll position when using long page BIO layouts.
The background image used in the screen shot was hosted on ImgBB.
You can view it directly here: https://i.ibb.co/KbcRnhb/BG-01.jpg
The BIO Background Image Code:
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This code block is what sets the BIO background image in the above screenshot.
You can test it in your own BIO by copying and pasting it into either your About Me or Wish List information box.
You may want to change the background image to one of your choice. To do this you will need to upload your background image to an image hosting site and change the image link.
In this example I used ImgBB for the image hosting.
After you upload your own image to the hosting site you will need to change the image link in the code to your image link:
From: background: url('https://i.ibb.co/KbcRnhb/BG-01.jpg')
To: background: url('your_image_link')
In the BIO background image example I have used additional code to center the background image in the BIO area, created rounded corners, and set a thin red border around it.
In the next section I will explain what each part of the code does. This will give you an idea how to customize it for your liking.
Note: I would advise using light coloured backgound images for your BIO. Darker images may hide your BIO information text.
Background Image Code Explained:
Let's take each part of the code block in turn and explain what it does.
<p style="......"></p>
The style= part allows us to apply custom CSS code to the paragraph element.
position: absolute;
top: 8px; left: 0px;
margin: 0px; padding: 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;
This tells the browser to cover the floating element with the background image. Depending on the height / width ratio of the background image and the window height / width ratio some of the background image may be cropped.
background-attachment: fixed
This holds the background image in a fixed position so the BIO contents move over it when you scroll the page.
background-position: top left
This positions the background image to the top left of the floating element.
box-sizing: border-box;
border: solid 1px #f040c0; border-radius: 8px;
This sets the type of border, the border width, and border color of the floating element. It has been set to a solid line, 1px thick, and red-blue colour.
border-radius: 8px
This sets the radius of the floating element's corners. If it was set to zero (0px) the corners would be right-angled.
Let's take each part of the code block in turn and explain what it does.
<p style="......"></p>
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This declares our background image holding element as a paragraph element. This is one of the the simplest types of element and it suits our purposes. The first part indicates the opening tag, and the second part indicates the closing tag.
The style= part allows us to apply custom CSS code to the paragraph element.
position: absolute;
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This sets the element as a floating element that can be placed anywhere in the BIO area. It will not upset the normal flow of the BIO layout. Think of it as a sticky-note placed on a page in a book - it can be placed anywhere on the page and it will not disturb any of the words beneath it.
top: 8px; left: 0px;
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This sets where the top left corner of the floating element sits in the BIO area. In this code it is positioned 8 pixels from the inside top edge, and 0 pixels from the inside left edge.
margin: 0px; padding: 0px;
<p style="position: absolute; top: 8px; left: 0px;margin: 0px; padding: 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>
This clears any default margin space around the outside of the element border, and clears any internal padding space inside the border.
width: calc(100% - 8px); height: calc(100% - 15px);
<p style="position: absolute;top: 8px; left: 0px; margin: 0px; padding: 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>
This sets the width and height of the floating element in pixels. The calc function calculates the full width and height of the BIO area and then subtracts 8px from the width, and 15px from the height. This creates a symmetrical white margin between the edges of the background image and the inside of the BIO area.
z-index: -1;
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This sets the stacking position of the floating element. The regular BIO information elements are not given a stacking order value so they default to position zero (0) in the stacking order. When we set the background image floating element to (-1) it will appear behind the regular BIO contents. This is where the recent code change in the Broadcast Page has helped us. Previously if we tried to set the background image element to (-1) it would be placed under the whole page and not be seen.
background: url('https://i.ibb.co/KbcRnhb/BG-01.jpg');
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This sets the direct link to the background image stored on the ImgBB image hosting site.
background-size: cover; background-attachment: fixed; background-position: top left;
<p style=" position: absolute;top: 8px; left: 0px; margin: 0px; padding: 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>
background-size: cover
This tells the browser to cover the floating element with the background image. Depending on the height / width ratio of the background image and the window height / width ratio some of the background image may be cropped.
background-attachment: fixed
This holds the background image in a fixed position so the BIO contents move over it when you scroll the page.
background-position: top left
This positions the background image to the top left of the floating element.
box-sizing: border-box;
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
This tells the browser to include the outside border thickness in the size of the floating element when we set the width and height of it. It is easier to think of the combined size of background image and border as a whole rather than separately.
border: solid 1px #f040c0; border-radius: 8px;
<p style="position: absolute; top: 8px; left: 0px; margin: 0px; padding: 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>
border: solid 1px #f040c0
This sets the type of border, the border width, and border color of the floating element. It has been set to a solid line, 1px thick, and red-blue colour.
border-radius: 8px
This sets the radius of the floating element's corners. If it was set to zero (0px) the corners would be right-angled.