CODEWITHSUNDEEP
htmlcss
user1768788
user1768788

Reputation: 1355

How do I make a div "not take space"?

I'm trying to make a "dynamic" background with divs rotating, I have a big image which, when rotated, makes the scroll bars bigger, is there anyway of displaying the image within the div, in the background, rotating but make it so it doesn't take up space/doesn't change scroll bars?

For the rotation I'm using css animations.

CSS

body {
    background-color:rgb(80,0,0);
}
.rotating {
    width:600px;
    height:600px;
    position:absolute;
    top:-50px;
    left:-100px;
    background-color:rgb(0,0,255);
    -webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
    background-color:rgba(0,0,0,0.5);
    margin:0 auto;
    position:relative;
}

HTML

<div class='rotating'></div>
<div class='content'>test</div>

http://jsfiddle.net/kZW8j/

Upvotes: 0

Views: 2454

Answers (3)

aebabis
aebabis

Reputation: 3705

I got it working. The trick is to use z-index on .content and to put the rotating div inside a 0-size relative positioned div, also z-indexed. Overflow will still trigger.

http://jsfiddle.net/acbabis/gwN4H/

HTML

<body>
    <div class="background-wrapper">
        <div class="rotate"></div>
    </div>
    <div class="content">
        <p>...</p>
        <p>...</p>
    </div>
</body>

CSS

.content {
    width: 40%;
    height: 100%;
    position: relative;
    padding: 10% 30%;
    z-index: 10;
}
.background-wrapper {
    z-index: 0;
    position: relative;
    height: 0;
    width: 0
}
.rotate {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 200px;
    top: 200px;
    // Animation code removed
}

Upvotes: 0

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

This is possible with little tweaking in your code. You can place the rotating div inside a bg div which is absolutely positioned and given the size of your document and by hiding its overflow.

Here is the code and your fiddle modified http://jsfiddle.net/kZW8j/2/

HTML

<div class="bg">
    <div class='rotating'>
</div>
<div class='content'>test</div>

CSS

body {
    background-color:rgb(80,0,0);
}
.bg{
    position:absolute;
    top:0;
    left:0;
    background-color:rgb(80,0,0);
    overflow:hidden;
}
.rotating {
    width:600px;
    height:600px;
    position:absolute;
    top:-50px;
    left:-100px;
    background-color:rgb(0,0,255);
    -webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
    background-color:rgba(0,0,0,0.5);
    margin:0 auto;
    position:relative;
}

Jquery

function widthContainer()
{
    var dw=$(document).width(), dh=$(document).height();
    $(".bg").css({"width":dw, "height":dh});
}

$(document).ready(function(){
widthContainer();

$(window).resize(function(){
    widthContainer();
});
});

I think this solves your issues. Let me know if you need any help.

Upvotes: 1

Senya
Senya

Reputation: 23

You might also want to try working with z-index.

Upvotes: 0

Related Questions