locked
Scroll bars in body section RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User546194788 posted

    In ASPX page, I add CSS as below.

    Both vertical and horizontal scroll bars display but grey out.

    How to make scroll bars showing and working?

    .mybody {
    margin: 0;
    background: url("images/backgroundjob.png");
    background-size: 4000px 250px;
    background-repeat: no-repeat;

    overflow: scroll;
    }

    <body class="mybody">

    ---some div, panel here

    </body>

    Friday, January 4, 2019 2:54 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    How to make scroll bars showing and working?

    The CSS overflow: scroll; property turns on the scroll bar(s).  I assume the body content is not larger enough to scroll therefore the scroll bars are not enabled. There's nothing to scroll.

    Please explain the problem you are trying to solve and expected result. 

    Friday, January 4, 2019 3:30 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi aspfun,

    The reason scrollbars are not being shown is that they are determined by the overflow of its content.

    The background property does not represent content propagated to the element.

    Also, it could not influence overflow and then cause scrollbars to appear.

    So my suggestion is that you could apply the image as the src of an img to achieve your requirement like below.

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .mybody {
            margin: 0;
            background: url("Images/test1.jpg");
            background-size: 4000px 250px;
            background-repeat: no-repeat;
            overflow: scroll;
        }
    </style>
</head>
<body class="mybody">
    <form id="form1" runat="server">
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <img src="Images/test1.jpg" />
        </div>
    </form>
</body>
</html>

    the result.

    Best Regards,

    Jenifer

    Monday, January 7, 2019 7:17 AM