main layout fixed background and elements inside code snippet #4

Most probably the series of code snippets should of started with the main block element, the parent, the all mighty block which holds the entire layout
Yes I know, my bad is now your perspicacity of connecting the dots..

we will achieve this but starting (again) from scratch

Custom Chaturbate layout with fixed background image - Code Snippet #4 by Dan N

The layout structure

I'll use <ul> as main wrapper and all content inside this parent, this is the layout

Overall base markup will look like this
<ul style="">
<li style="">... content ...</li>
</ul>

  • Header Zone

    • Block 1
      float:left / width:50%

    • Block 2
      float:left / width:50%

    • cgc divider
  • Block 3
    no float / width:80%

    SECTION's TITLE

    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. "

In this demo we have the main <ul> block element which holds the entire content. Visually defined by this purple-ish background color #939

To make the code compatible with Chaturbate platform and replace the div tag which usually should be used (but not allowed, we have the liHTML tag, the next best thing.
So, the next element will be a header section visually defined as a purple-ish darker background and Header Zone text inside

Two more sections (just for demo purpose) and we'll visually define those with yellow-gold background color and text inside.

Added a 3rd block just to make the layout more interesting to develop. It has some basic text blocks


Ok, let's work with that. Enough markup to play with. Here we go, visual enhancement.

<ul style="display:block;width:100%;min-width:10%;height:auto;box-sizing:border-box;float:none;clear:left;padding:3em 0 3em;list-style:none;background-color:#939;"><li style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:0;text-align:center;background-color:rgba(0,0,0,0.7);"><p style="display:block;width:90%;height:auto;margin:0 auto;text-align:center;font-size:30px;color:#fff;font-weight:100;padding:2em 0 2em;">Header Zone</p></li><li style="display:block;width:100%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:0;text-align:center;background-color:rgba(0,0,0,0.2);"><ul style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:1em;text-align:center;background-color:rgba(0,0,0,0.2);"><li style="display:block;width:50%;height:auto;margin:0;box-sizing:border-box;list-style:none;padding:2em 0 2em;text-align:left;float:left;background-color:#dfd66e;transform:scale(.9);"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#555;font-weight:400;">Block 1<br>float:left / width:50%</p></li><li style="display:block;width:50%;height:auto;margin:0;box-sizing:border-box;list-style:none;padding:2em 0 2em;text-align:left;float:left;background-color:#dfd66e;transform:scale(.9);"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#555;">Block 2<br>float:left / width:50%</p></li><li style="display:block;width:100%;height:0;float:none;clear:left;list-style:none;opacity:0;overflow:hidden;margin:0 auto;">cgc divider</li></ul></li><li style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:1em 0 1.7em;text-align:center;background-color:rgba(0,0,0,0.2);"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#dfd66e;font-weight:400;">Block 3<br>no float / width:80%</p><p style="display:block;width:90%;height:auto;margin:0 auto 12px auto;text-align:center;padding:.5em .5em 1em;box-sizing:border-box;font-size:2.5rem;color:#ccc;text-shadow:0 1px 7px #000;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">SECTION's TITLE</p><p style="display:block;width:90%;height:auto;margin:18px auto 12px auto;text-align:left;font-size:1.5rem;color:#fff;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p style="display:block;width:90%;height:auto;margin:18px auto 12px auto;text-align:left;font-size:1.5rem;color:#fff;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. "</p></li></ul>

We'll add a background image to the first ul tag, the parent block which holds all content.

First the render and after that I will explain how to add the background image and which css styling is helping me do the magic

  • Header Zone

    • Block 1
      float:left / width:50%

    • Block 2
      float:left / width:50%

    • cgc divider
  • Block 3
    no float / width:80%

    SECTION's TITLE

    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. "

I can cleanup the code but not right now, instead let me explain what I did, where and why.

As mentioned above, the first ul element is the parent, the layout, all stuff go inside (between open and closed HTML tags)

To this element I've added the background image, a png image file with transparent background because if I want to give another look I'll simply edit the background color and not the image itself

So, here's the css

  • background-image:url(https://raw.githubusercontent.com/cgc-dan/dxpro/main/dxpro-demos/bgdemodxpro.png); - the source/url of my hosted image -- its a bigger one in width and height so the repeat is set to no
  • background-repeat:no-repeat; - if I were to use a smaller image 300x300px width/height, than for best rendersing I should of use background-repeat:repeat;
  • background-size:cover; - informs the browser how to render my image, cover is streaching the background image to fit the entire block. Smaller images will don't look good with cover
  • background-position:center; - informs the browser where to position my background image, other values can be used like background-position:0 0; or background-position:left top ...
  • background-attachment:fixed; - how the background image will respond when scroll down the page. I've used fixed so the background will stay in place even if I scroll down

    Other values can be used like
    scroll The background image will scroll with the page. This is default.
    fixed The background image will not scroll with the page
    local The background image will scroll with the element's contents
    inherit Inherits this property from its parent element.

That's it. Now our layout, our design has a fixed background and some block elements inside.

And... done!

Notes:
- make that when using smaller images, repet property is set up to one of these values
background-repeat: repeat
background-repeat: repeat-x - repeat only horizontally
background-repeat: repeat-y - repeat only vertically


  • Header Zone

    • Block 1
      float:left / width:50%

    • Block 2
      float:left / width:50%

    • cgc divider
  • Block 3
    no float / width:80%

    SECTION's TITLE

    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. "

Full Markup Code

<ul style="display:block;width:100%;min-width:10%;height:auto;box-sizing:border-box;float:none;clear:left;padding:3em 0 3em;list-style:none;background-color:#939;background-image:url(https://raw.githubusercontent.com/cgc-dan/dxpro/main/dxpro-demos/bgdemodxpro.png);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;"><li style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:0;text-align:center;background-color:rgba(0,0,0,0.7);box-shadow:0 20px 28px -17px #000;border-radius:8px;"><p style="display:block;width:90%;height:auto;margin:0 auto;text-align:center;font-size:30px;color:#fff;font-weight:100;padding:2em 0 2em;">Header Zone</p></li><li style="display:block;width:100%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:0;text-align:center;"><ul style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:1em;text-align:center;"><li style="display:block;width:50%;height:auto;margin:0;box-sizing:border-box;list-style:none;padding:2em 0 2em;text-align:left;float:left;background-color:#dfd66e;transform:scale(.9);border-radius:8px;"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#555;font-weight:400;">Block 1<br>float:left / width:50%</p></li><li style="display:block;width:50%;height:auto;margin:0;box-sizing:border-box;list-style:none;padding:2em 0 2em;text-align:left;float:left;background-color:#dfd66e;transform:scale(.9);border-radius:8px;"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#555;">Block 2<br>float:left / width:50%</p></li><li style="display:block;width:100%;height:0;float:none;clear:left;list-style:none;opacity:0;overflow:hidden;margin:0 auto;">cgc divider</li></ul></li><li style="display:block;width:80%;height:auto;margin:20px auto 33px auto;box-sizing:border-box;list-style:none;padding:1em 0 1.7em;text-align:center;background-color:rgba(0,0,0,0.5);border-radius:8px;border:1px solid #F39;box-shadow:0 0 15px rgba(0,0,0,0.7);"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:1.3em;text-align:center;font-size:20px;color:#dfd66e;font-weight:400;">Block 3<br>no float / width:80%</p><p style="display:block;width:90%;height:auto;margin:0 auto 12px auto;text-align:center;padding:.5em .5em 1em;box-sizing:border-box;font-size:2.5rem;color:#ccc;text-shadow:0 1px 7px #000;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">SECTION's TITLE</p><p style="display:block;width:90%;height:auto;margin:18px auto 12px auto;text-align:left;font-size:1.5rem;color:#fff;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p style="display:block;width:90%;height:auto;margin:18px auto 12px auto;text-align:left;font-size:1.5rem;color:#fff;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. "</p></li></ul>

End customized markup code

Test markup codes using Source Editor beta tool (registered users only)

Resources

Leave a Reply

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