How to place a section as a background for all of the page?

Question

How to place a section as a background for all of the page? I have maked a FontAwesome Background Animation Effects all of it in a section, I want to complete the page with paragraph, photos,,, and set the section as a background for all of that. there is about 20 rows in HTML code but I have maked it small so I can put it in StackOverflow

*
{
    margin: 0;
    padding: 0;
}
section
{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
section .row
{
    position: relative;
    top: -50%;
    width: 100%;
    display: flex;
    padding: 10px 0;
    white-space: nowrap;
    font-size: 64px;
    transform: rotate(-30deg);
}
i
{
    color: rgba(0, 0, 0, 0.5);
    transition: 1s;
    padding: 0 5px;
    user-select: none;
    cursor: default;
}
i:hover
{
    color: #0f0;
    transition: 0s;
    text-shadow: 0 0 120px #0f0;
}
section .row div
{
    animation: animate1 80s linear infinite;
    animation-delay: -80s;
}

section .row div:nth-child(2)
{
    animation: animate2 80s linear infinite;
    animation-delay: -40s;
}
@keyframes animate1
{
    0%
    {
        transform: translateX(0%);
    }
    100%
    {
        transform: translateX(-200%);
    }
}
@keyframes animate2
{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(-100%);
    }
}



section .row:nth-child(even) div
{
    animation: animate3 80s linear infinite;
    animation-delay: -80s;
}

section .row:nth-child(even) div:nth-child(2)
{
    animation: animate4 80s linear infinite;
    animation-delay: -40s;
}
@keyframes animate3
{
    0%
    {
        transform: translateX(-100%);
    }
    100%
    {
        transform: translateX(100%);
    }
}
@keyframes animate4
{
    0%
    {
        transform: translateX(-200%);
    }
    100%
    {
        transform: translateX(0);
    }
}




    
    
    FontAwesome Background | Animation Effects

user_7378406 · Answer

If your background based on DOM elements, you cannot apply this to another page without paste the same html code one more time in another place. But if you apply background or background pattern based on CSS, you can multiple this one everywhere. In this case, all what you can is absolute positioning this section in every page where you want, using correct position in stack with z-index. Also, need to check performance of your page: maybe some gif pattern will be easier.

user_14785531 · Answer

Make the section's position fixed with top 0 and push it back with z-index. Then change all the other element's background to be transparent and push them front with z-index, and you get the section to be as background for the whole page.

*
{
    margin: 0;
    padding: 0;
}
#background
{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
}
section .row
{
    position: relative;
    top: -50%;
    width: 100%;
    display: flex;
    padding: 10px 0;
    white-space: nowrap;
    font-size: 64px;
    transform: rotate(-30deg);
}
i
{
    color: rgba(0, 0, 0, 0.5);
    transition: 1s;
    padding: 0 5px;
    user-select: none;
    cursor: default;
}
i:hover
{
    color: #0f0;
    transition: 0s;
    text-shadow: 0 0 120px #0f0;
}
section .row div
{
    animation: animate1 80s linear infinite;
    animation-delay: -80s;
}

section .row div:nth-child(2)
{
    animation: animate2 80s linear infinite;
    animation-delay: -40s;
}
@keyframes animate1
{
    0%
    {
        transform: translateX(0%);
    }
    100%
    {
        transform: translateX(-200%);
    }
}
@keyframes animate2
{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(-100%);
    }
}



section .row:nth-child(even) div
{
    animation: animate3 80s linear infinite;
    animation-delay: -80s;
}

section .row:nth-child(even) div:nth-child(2)
{
    animation: animate4 80s linear infinite;
    animation-delay: -40s;
}
@keyframes animate3
{
    0%
    {
        transform: translateX(-100%);
    }
    100%
    {
        transform: translateX(100%);
    }
}
@keyframes animate4
{
    0%
    {
        transform: translateX(-200%);
    }
    100%
    {
        transform: translateX(0);
    }
}
div {
  position: relative;
  color: white;
  background-color: transparent;
  z-index: 100;
  line-height: 2rem;
  color: #fff6;
}
div.red {
  color: #f005;
}




    
    
    FontAwesome Background | Animation Effects
    
    
    
    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
        
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.
        
        
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.

But a small problem is, you will not be able to hover those icons because they are at the back of a div.

How to place a section as a background for all of the page?

2 Answers