Home/ Questions/Q 7814751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:17:38+00:00

How can I add a repeated css background with an padding/space on top. Here

  • 0

How can I add a repeated css background with an padding/space on top.

Here is my HTML Structure.

<div class="flare">
    <div class="clouds">
    <div class="clouds_bottom">

        <div class="header">
            contents
        </div>

        <div class="content_body_wrapper">
            contents
        </div>

        <div class="footer">
            contents
        </div>

    </div>
    </div>
</div>

and my css code that is not working.

.clouds_bottom {
    background: url('../img/clouds_bottom_bg.png') repeat left 250px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Cheating is allowed with CSS. Instead of placing you background 100% away from top cover it with another div with original background [color].

    html:

    <html>
<body>
    <div id="cheated_background">
    </div>
    <div id="body">
        content
    </div>
</body>
<html>​

    css:

    body {
    background: lightblue; /* your clouds :) */
}
#cheated_background {
    position: absolute;
    top: 0px;
    background: white;
    width: 100%;
    height: 100px;
}
#body {
    position: relative;
}

    Check out live example.

    • 0