css image/content over 2 <div> and vertically centered_问答_开发者

css image/content over 2 <div> and vertically centered

开发者 https://www.devze.com 2023-04-13 04:38 出处：网络

相关专题：css overlay

I need to split the back开发者_Python百科ground 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?

Example using position:fixed:
http://jsfiddle.net/LBQbb/3/

To vertically center content with unknown height, you can use this technique:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

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 {}

Just create a third div. as it comes afterwards it should be displayed on top without needing z-indexes.

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; min-width:950px; min-height: 950px;}
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
.third { position: absolute; top:50%; left:50%; width: 900px; margin-left: -450px; margin-top: -450px; }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="third"> add content here</div>
</body>

adding the position absolute and setting it to top,left = (0,0) you can afterwards work with it without a problem. Ignoring the other divs that give color to the background.

Edit:

Fixed to answer to your comment. Like that it will create a box 900px by 900px always centered in the middle of the screen.