I have a bg image for a div which itself is height and width 100% (i.e. it covers the entire browser window).
This image gets cut off the bottom though. I have already tried things like background-size: cover; and height: 100%; width: 100%. Nothing seems to stop the bottom being cut off. I tried resizing the src image itself making it tiny and the bottom is still cut off?
HTML:
<div id="des" class="full-window">
</div>
CSS:
#des {
background: url("bg.png");
background-size: 100% 100%;
}
.full-window {
width: 100%;
height: 100%;
}
you are missing background properties to fit image without cutting.
try this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I can't get my background image to repeat on the y-axis when it is viewed on a mobile device. currently when on desktop the page can't scroll and the background image fills the screen. but if you move to tablet or mobile you need to scroll and the image is not repeating. My current code isn't much:
body {
background-image: url("../assets/BG.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Any help would be great.
Gif of issue: https://imgur.com/a/jX19E
erase background-size: cover; from that rule - this will always fill the full body element, also the part that appears when scrolling. Add background-size: 100% auto; instead and change the position to background-position: left top to make sure the image covers the complete width, starting from the upper left edge.
(BTW, position: absolute; for the body element is rather strange)
Here's a snippet that demonstrates it with a placeholder image:
body {
background-image: url("http://lorempixel.com/600/100/food");
background-size: 100% auto;
background-repeat: repeat-y;
background-position: left top;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Been Trying to set an image fully stretched(such that it covers the entire page) as a background for a section. And what is the difference between background size: cover and 100% 100%
<section class="starter"></section>
.starter
{
background-image:url("C:/Users/Rakesh/Desktop/Medium v1.3/Section.jpg");
background-size:cover;
background-repeat:repeat-x;
height: 100%;
width: 100px;
min-height: 100%;
}
background-size:100% 100%
causes the image to stretch and fill
background-size:cover
causes the image to maintain aspect ratio and crop
http://jsfiddle.net/pkrf1b5f/
See this post:
https://css-tricks.com/perfect-full-page-background-image/
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I want a full sized background image, inside a div. The div is the last element, so I want it to fill to the bottom of the page. So far, I have this code, which makes it fill to the sides, but changing height to 100% makes it disappear, and I can't seem to get it to fill the page.
.launch {
background: url('Images/launchBackground.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Without seeing your HTML, have you tried:
background-image: url('Images/launchBackground.jpg')
also you can try to set it manually:
.launch {
top: 0px;
left: 0px;
min-height: 100%;
min-width: 100%;
position: fixed;
}
Try to use the property background-size with the value 100% 100%
Example:
.launch {
background: url('Images/launchBackground.jpg') no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}