This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 6 months ago.
I have recently been creating a link in-bio page and I am trying to make the background image cover the whole screen but it is only covering parts of the screen where I have objects like a header or list. Below I have the CSS code that I used to insert the background image.
body {
background: url(./942775.png) no-repeat center center fixed;
background-size: cover;
}
It's likely that your body element is not the full size of your viewport. Try stretching html and body to the full window:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
background-size: cover;
}
main {
color: white;
}
<main>Hello world</main>
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:
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
This question already has answers here:
Vertically centering image in a div tag [duplicate]
(4 answers)
Closed 7 years ago.
If you reed carefully this question you'll note IT'S NOT A DUPLICATED QUESTION. This one is about an image over a responsive background with full height image display. The answers related to the other questions are useless here. Thanks to jacob for his simple solution.
The issue:
I have a DIV with a responsive background. I'm trying to place a centered png "logo" over the DIV (or the background, if you prefer). That's what I have:
.divWithBG {
background-image: url(...);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
.divWithBG img{
display: block;
margin: 0 auto;
}
¿What I need to do to place the image inside the div? Centered both, vertically and horizontally.
Many thanks in advance.
You could just make it simpler and use 2 background images. Multiple background images in CSS:
.divWithBG {
background-image: url("http://lorempizza.com/380/240") , url("http://lorempizza.com/2000/2000");
background-size: 50%, contain;
background-repeat: no-repeat, no-repeat;
background-position:center;
width: 100%;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
<div class="divWithBG"></div>
The background image you want to be on top comes first in the background property.
This question already has answers here:
Background Grey
(2 answers)
Closed 9 years ago.
I have set a background image on my website, in some browsers there come grey blocks in the background image. How do I solve this?
Website: http://haptotherapiemris.nl/
Here is my Css code:
.main {
margin: 0 auto;
background: transparent url(http://dansolution.nl/klanten/background/bg.jpg) repeat-y center top;
width: 1000px;
min-height: 1000px;
text-align: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
if you mean the grey color to the right and left of your bg image... then you can remove it from the body { css file.
body {background-color:#595959; ...... }
to be
body {background-color:#ffffff; ..... }