如何使用引导程序在页面中间垂直和垂直设置它

Question

[Excuse me for my English] I just centered my "logo" horizontally and vertically. But what I want is that when I resize my browser that my logo becomes a little bit smaller. How can I do this in bootstrap?

Index.html

<section>
    <div class="container">
        <div class="bg">
        </div>
    </div>
</section>

screen.css

.bg {
    position: absolute;
    background: url("../images/comingsoon.png") no-repeat center center fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Answer 1

You can use background-size :

.bg {
    position: absolute;
    background: url("../images/comingsoon.png") no-repeat center center fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-size: 100% 100%;
}

This will make your background image resizable, because it's relative to the parent size.

More information:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

You can use viewport units ⁽¹⁾ vw and vh with the background-size to make the size of the background depends on the window width and height

JS Fiddle 1

 .bg { position: absolute; background: url("//placehold.it/400x200/00AA00/ffffff?text=Coming Soon") no-repeat center center fixed; background-size:50vw 40vh; /*added this */ top: 0; left: 0; bottom: 0; right: 0; background-color:orange; margin: auto; } 

 <section> <div class="container"><div class="bg"></div></div> </section> 

---

Or you can use percentage values, change change the above background-size line into this:

background-size:50% 40%;

JS Fiddle 2

From MDN - Background-Size :

A <percentage> value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present . Negative percentages are not allowed.

---

Note that the 50vw , 40vh , 50% and 40% are just values for demonstration purposes, you can put any positive values you want .

-------------------------------------------------------------------------------

⁽¹⁾ Resources:

• CanIuse - Viewport Units

• MDN - Viewport