Home/ Questions/Q 6697833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:30:25+00:00

I need to split the background of an html page in 2 (horizontally). The

  • 0

I need to split the background of an html page in 2 (horizontally). The top and bottom part will have a different background image/texture, that will be repeated, in other words expandable with the window’s size.
On top of this “split background”, I want to display some content, like texts or images.

This code generates a “split background” like I want, but I can’t/don’t know how to put content on top of that…

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; }
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
</body>

</html>

The content should be centered vertically and horiontally on top of this “split background”. I tried to use a third div, play with z-indexes and use the css3 multiple bg feature, but I couldn’t get the result wanted.
Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok at the end I couldn’t find a solution in CSS. The content image I was placing over the 2 other divs would not align correctly if the browser window was too small…

    I solved it using some javascript, since the site I develop already contains Javascript, it wasn’t an issue.

    Here is the html:

    <html>
<head>
<link href="css/reset-min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $(window).resize(function(){

                $('.content').css({
                    position:'absolute',
                    left: ($(window).width() 
                      - $('.content').outerWidth())/2,
                    top: ($('body').height() 
                      - $('.content').outerHeight())/2
                });

            });

       //To initially run the function:
       $(window).resize();

    });
    </script>

</head>

<body onload="$(window).resize()"> <!-- needed to correct loading bug -->

    <div class="top"></div>
    <div class="bottom"></div>

    <div class="content">
         <img alt="Content" src="img/01_illustration.png" /> 
    </div>
</body>
</html>

    And the css:

    html, body { width:100%; height: 100%; }

body { min-height: 768px; min-width: 1024px; }


.top { width: 100%; height: 50%; background-image:url('img/01_texture_top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/01_texture_bottom.jpg'); }

.content {}
    • 0