Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixing a background to prevent scroll

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #32799
    Catasphere
    Member

    Hey guys, I’m stuck trying to fix the background (which is in a DIV) to the page while keeping the DIV’s inside the background element from being fixed as well. Here’s my code:







    Tumble All Day





    Tumblr Theme




    Description


    Hello. This is a description. Here I describe myself, and my tumblelog.








    This is a typical blog post.







    And here is the CSS file:


    /* A little bit of a reset */
    * { margin:0; padding:0; }

    html, body {
    height: 100%;
    background-color:#13171F;


    h1 {
    margin: 5px;
    text-align: center;
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }

    h2 { text-align: left; }

    /* How main content panels like "Description" are styled */
    #content_panel {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 20%;
    margin: 0 auto;

    background-color:#010712;
    box-shadow: inset 20px 0 10px -15px black, inset -20px 0 10px -15px black, inset 0 20px 20px -20px aqua;
    }

    /* The main nav under the main title */
    #main_nav {
    position: relative;
    z-index: 3;
    background-color: #24262D;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    }

    /* Basic stylings for link colors within the main nav */
    #main_nav a:link { text-decoration:none; color:#3194C6; }
    #main_nav a:visited { text-decoration:none; color:#3194C6; }
    #main_nav a:hover { text-decoration:underline; color:#3194C6; }
    #main_nav a:active { text-decoration:underline; color:#3194C6; }

    /* Position, font, color, and size of the left and right columns */
    #left_column {
    position: fixed;
    width: 20%;
    height: 100%;

    background-color:#13171F;
    color: white;
    font-family: Helvetica Neue, Arial, sans-serif;
    }

    #right_column {
    position: fixed;
    width: 20%;
    height: 100%;
    left: 80%;

    background-color:#13171F;
    color: white;
    font-family: Helvetica Neue, Arial, sans-serif;
    }

    /* Removing the bullets and vertical style of ul withing the left and right columns */
    #left_column ul, #right_column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #left_column ul {
    text-align: center;
    }

    #left_column li, #right_column li { display: inline; }

    /* Styling the main content boxs inside columns with inset shadow and inner color */
    .content_box {
    background-color: #24262D;
    margin: 10px 10px 5px 10px;
    padding: 5px 7px 5px 7px;
    border-radius: 5px;
    box-shadow:inset 1px 1px 5px black, inset -1px -1px 5px black;
    }

    #post {
    background-color: white;
    margin: 0 auto;
    width: 300px;
    height: 500px; }

    /* Basic styling for link color inside the social nav */
    #social_nav a:link { text-decoration:none; color:white; }
    #social_nav a:visited { text-decoration:none; color:white; }
    #social_nav a:hover { text-decoration:none; color:white; }
    #social_nav a:active { text-decoration:none; color:white; }



Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.