Home/ Questions/Q 8633295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:28:16+00:00

I have background , picture size is 6 MB and I can’t write background:

  • 0

I have background, picture size is 6 MB and I can’t write background: url(...).

This long page consists of 6 parts and I decide to divide the background to 6 pictures and I want each block’s background to load after each other and show a preloader in each block before the background loads.

<div class="page" id="page_1">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>

<div class="page" id="page_2">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>

<div class="page" id="page_3">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>
.......
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As per @meager’s comment, you will be better off splitting the the part with the ship in it, the footer and the repeating background. I already did your homework for this one.

    Check out this JSFiddle to see how I tested it.

    HTML Code

    <html>
  <head>
    ...
  </head>
  <body>
    <div id="top-image">
    </div>
    ...
  </body>
</html>

    CSS Code

    For the top part:

    #top-image {
    background: url('top.jpg');
    background-repeat: no-repeat; /*to counteract the default value*/

    width: 100%; /*this may get screwed up otherwise*/
    height: 850px; /*allowing a bit more height to remain safe*/
}

    For the middle repeating part:

    body {
    background: url('middle.jpg');
    background-repeat: repeat-y; /*want this one to repeat*/
    background-position: 0px 835.5px; /*so it fits perfectly with the overlayed image*/
}

    For the bottom footer:

    Figure it out yourself! Nah, kidding. Just use the same principle I used above for the top part.

    Images

    The top ship part:
    top

    The middle repeating part:
    middle

    The footer:
    bottom

    • 0