CSS3 background-size: cover doesn't make image cover vertically
Tag : css , By : lamberms
Date : March 29 2020, 07:55 AM
wish helps you Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS. Would either of these examples work? <body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">
</div>
</body>
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% */
}
}
<?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 . "\"/>";
?>
...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...
html, body {
margin:0;
height:100%;
}
img.source-image {
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
min-width:1024px;
}
|
Background-size:cover makes background image full-size instead of fitting to div
Date : March 29 2020, 07:55 AM
Hope that helps . Hello, I'm trying to figure out why when I use background-size: cover on an image that is placed as a div's background by javascript that the image does not shrink to the div's size but instead remains full-sized where only the part that is in the div is visible. , Remove this line from your CSS Style: background-attachment: fixed;
|
Calculate the size of a specific portion on a background set with background-size: cover;
Date : March 29 2020, 07:55 AM
like below fixes the issue I finally managed to fix the problem, which was not as complicated as I thought. The first thing is to know the background width and height // In css : background-size: 100% 100%;
var background = {width: 1200, height: 900 };
var redScare = {selector: '.redScare', width: 400, height: 342, x: 50, y: 60};
var xFactor = $( window ).width() / background.width;
var yFactor = $( window ).height() / background.height;
// New width proportionally to the window size
redScare.width = redScare.width * xFactor;
// New height proportionally to the window size
redScare.height = redScare.height * yFactor;
//Setting the new dimensions
$(redScare.selector).css('width', redScare.width);
$(redScare.selector).css('height', redScare.height);
|
background-clip with background-size cover beaks cover?
Date : March 29 2020, 07:55 AM
Hope this helps Yes, this is normal behavior. The content-box does not mean the image is sized within it, it means it gets clipped by it. div {
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div::before {
content: '';
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}
<div>
</div>
|
background-size: cover does not cover the whole scrollable page
Date : March 29 2020, 07:55 AM
may help you . Remove the height:100% and make it min-height instead. You can also simplify your code like this: body {
min-height: 100%;
background-color: blue;
position:relative;
margin:0;
}
body:before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
}
.content {
height: 1800px;
width: 200px;
background-color: white;
margin:auto;
position:relative;
z-index:1;
}
<div class="content"></div>
|
Boards Message :
Related QUESTIONS :