All geek questions in one place

CSS3 background-size: the cover does not make the image vertical

I am trying to create a website with a background image that I want to always fill the entire screen.

When the browser window is short and wide, I want the image to expand so that the top of it fills the entire screen in length and the rest is not visible.

When the browser window is tall and thin, I want the image to expand so that the left part of it fills the entire screen in height and the rest is not visible.

Using the CSS3 background-size: cover property makes the former work like a charm, while the latter doesn't. Instead, the background image is reduced so that it is fully visible in a narrow area that is accessible and scalable to width, and then the rest of the page below it is just the background color.

body { background-color: #BF6F30; color: black; font-family: Georgia, "Times New Roman", sans-serif; background: url(' ... '); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

How can I fix this problem?

+6
source share
2 answers

Are you only interested in CSS background image? This can be done by loading the image and shifting it using CSS.

Will one of these examples work?

HTML

 <body id="page-body"> <img class="bg" src="images/bodyBackground1.jpg"> <div class="wrapper"> </div> </body>

CSS

 html { background: url(images/bodyBackground1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { background:#fff; margin: 0; padding: 0; overflow:hidden; } html, body { height: 100%; } img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Or this one? It loads images from the database into an array and loads them at random, but you can get information from this:

PHP load function

 <?php $bg_images = array( 0 => 'comp1.png', 1 => 'comp2.png', 2 => 'comp3.png', .... ); $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; ?>

HTML

 ... <body> <?php echo $showBG; ?> <div id="wrapper"> ...

CSS

 html, body { margin:0; height:100%; } img.source-image { width:100%; position:absolute; top:0; left:0; z-index:0; min-width:1024px; }

These options should fill the browser window according to the height and width.

+9
source

body { background: url("...") no-repeat center center fixed; background-size: cover; }

+1
source

Source: https://habr.com/ru/post/906574/

More articles:


All Articles