| |

Code Snippet #4 – Fixed background image in custom layout

Here we go with code snippet #4 in which we’ll have a fixed background image set up for main custom layout.

Inside of main parent will place a few blocks to hold our content.

The visual effect is nice and deserves our attention so, hands on and let’s code this thing.

We’ll be designing this from scratch

Full layout with fixed background and editable block elements

Additional notes. Header zone can be set to 100% width, no padding and placed at the very top of the layout. We have time to figure all this stuff later, but for now, let’s dive into code snippet #4 like professional web designers we are…

Click to codes / demo button to see the markup code and how it looks like rendered by browser.

However I need to mention that even if the code is compatible with Chaturbate platform for better position use margin:120px auto 50px 148px; on main ul element. It will look much better and wider.

For questions, suggestions or feedback, contact me or post a comment and I’ll do my best to assist.

Similar Posts

Leave a Reply to Misha Cancel reply

Your email address will not be published. Required fields are marked *


  1. This code snippet will have a part two or whatever? I try to do my friend’s design. Room rules, tip menu listing, schedule could be nice to have html for those too.

    1. at some point yes, the entire set of code snippets are making a custom CB design… visitor/user will have to connect the dots – put all code snippets into one.