CODEWITHSUNDEEP
htmlcssbackground-imagebackground-size
Michael Andorfer
Michael Andorfer

Reputation: 1800

Full screen background-image influences div size and other content

I have the following problem: I have a full screen image slider one my website which is responsive. The image size always adapts on the window size. My solution is as follows: 

.picture {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    min-width: 100%;
}

<div class="owl-carousel slides">
    <div class="slide">
        <div class="picture" style="background-image: url('myURL')"></div>
    </div>
</div>

The problem is that you can see the other content of the page at the sliders position when loading the page. The reason is that the picture container has no width when the page is loading. The width is calculated based on the image width. For a better understanding: I am loading the page, then for a short moment I can see the div content at the top and then the slider is loaded and the content is below the slider where it should be.

Does anyone have a solution?

Thanks in advance!

Upvotes: 0

Views: 511

Answers (1)

Lars Graubner
Lars Graubner

Reputation: 837

You could try the CSS3 Viewport Unit.

.picture {
    width: 100vh;
    height: 100vh;
}

Browser support is okay, except IE.

Upvotes: 1

Related Questions