This question already has answers here:
Fullscreen responsive background image in CSS
(5 answers)
Closed 7 years ago.
All:
I am pretty new to CSS background. I wonder if there is any way that I can resize background image to make it always fill the viewport as possible with only CSS.
The rule is:
No matter what ratio of the image, it always scale itself just enough to fill the viewport to make sure no empty space left.
<html>
<head>
<title>BLURRING IMG</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
padding:0px;
margin:0px;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ferns-unsplash.jpg");
background-position: fixed;
background-size: 100%, cover;
}
</style>
</head>
<body>
</body>
</html>
And I also want to know what is the difference between:
background-size: auto auto, cover;
and
background-size: cover;
Thanks
background-size: coverand background-position: fixed
Related
This question already has answers here:
Position a CSS background image x pixels from the right?
(21 answers)
Offset a background image from the right using CSS
(17 answers)
Closed 2 years ago.
I want to add a background image to my web page. The image that I want to use has around 20% transparent padding on all four sides. What attribute should I use so that the background image has an edge-to-edge fit (avoiding the transparent part)?
body{
background-image: url("bg.png");
background-size: 90%;
background-repeat: no-repeat;
}
You can change background image size, and fix them to center:
body{
background-image: url( "bg.png" );
background-size: 60% 60%; /* 100% - 40% (top/left + bottom/right paddings) */
background-position: center;
background-repeat: no-repeat;
}
For something like this, I prefer to add a container element to the page and avoid using body for background images when I need to exercise finite control over display and positioning. This would be my solution:
JSFiddle
Markup
<body>
<div class="container">
<div class="media"></div>
</div>
</body>
SCSS
body {
padding: 0;
margin: 0;
}
.container {
position: absolute;
width: 100%;
height: 100%;
.media {
width: 100%;
height: 100%;
transform: scale(1.4);
background: {
image: url("https://i.ytimg.com/vi/cYNlJYQI3Uw/maxresdefault.jpg");
position: center center;
size: cover;
repeat: no-repeat;
}
}
}
Notice that I use a CSS reset to remove automatic margin/padding on the body element, and that I allow body to fill the entire viewport.
The container class fills the body element with width and height set to 100%. I use the CSS background-size property to cover the container, then I use the transform property to scale container.
There are many ways to achieve this effect. Alternately, using a background-image property on the body tag will allow me to use background-size to scale the image to obfuscate the image's transparent padding as you described, but it is more difficult to center the image within the container.
This question already has answers here:
Why does styling the background of the body element affect the entire screen?
(7 answers)
Closed 3 years ago.
When I set background-image for <body>, the background image is larger then the body and the html size. Why is that?
html {
height: 0;
}
body {
height: 0;
background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg);
}
But the image occupies the entire area viewport. I don't want fix it. I want to know why background-image for body has this behavior
UPDATE:
html {
height: 0px;
}
body {
height: 0px;
background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg);
background-size:contain;
background-repeat:no-repeat
}
Is this what you want?
OLD
Can u try maybe to add
overflow: hidden;
or
background-size:100%
or
background-size: contain
or
background-size: cover
or maybe anything about. Please showcase part of code that peoples here can help you
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I don't want the body have the background picture. I want to apply it to my main div. If I set the image height to 100%, it generates a scroll-bar. If I give it pixels, it wont be fully responsive, and have white parts when resizing browser.
I want it to exactly fit on every screen sizes but without a scrollbar.
<div class="another-div"></div>
<div class="container-fluid main"></div>
<style>
.main{
background-image:
url("templates/img/single/register_selector_background.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
overflow: hidden;
}
</style>
I am not sure I am understanding your question, but think this is what you are looking for
100% will only size to the content contained in the element.
Using vh will use the display height
html{
overflow: hidden;
}
.main {
background-image: url("https://baconmockup.com/300/250");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
overflow: hidden;
}
<div class="another-div">Some other content</div>
<div class="container-fluid main"></div>
<div class="other-div">Other Content that is hidden because the scroll bar is disabled on html</div>
This question already has answers here:
Responsive css background images
(19 answers)
Closed 5 years ago.
I have an html file, and I set the background url to an image, but the image does not fill the browser's width:
I also tried set the width property to make it wider, but it seems to have no effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#bg {
height:1500px;
background: url("img/timg7.jpg") center top no-repeat;
width:1800px;
}
</style>
</head>
<body id="bg">
<div style="width:400px; height: 200px; background-color: antiquewhite">
BLOCK
</div>
</body>
</html>
You need the background-size attribute for this.
Your CSS should be:
#bg {
background: url("img/timg7.jpg");
background-size: cover;
background-repeat: no-repeat;
}
In this scenario, you should use background-size, there is a demo for background-size.
Try to use:
background-size: 120%;
Try to use:
background-size: cover;
and please remove those height and width
Try this:
#bg {
background: url("img/timg7.jpg") center top no-repeat;
background-size: cover;
}
#bg{
background: url("img/timg7.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
You don't need an id on your body, as document.body with get it with JavaScript, and you can just use body in the CSS. Of course, that's not your issue. See the code below:
html,body{
padding:0; margin:0;
}
body{
background:url(img/timg7.jpg) no-repeat; background-size:cover;
}
By the way, you should use external CSS, so it's cached into Browser Memory.
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 8 years ago.
I want to expand the hero image for 100% of the browser HEIGHT.
This is what I have:
.home-splash {
position: relative;
display: table;
width: 100%;
height: 100%;
background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
With this code, the hero image (or splash image) only expands to the height of the header. However, this problem can be avoided (somewhat) by using width: 100vh;. I don't like that because on mobile devices, the height of the hero image is really large... like 5000px in height. I just want it to expand the EXACT height of the browser.
Here is the jsFiddle :: http://jsfiddle.net/E7rDG/
You need to set the height of the html/body elements to 100%.
Updated Example
html, body {
height:100%;
}