I am having trouble here. I got a background image that is 1024x960, and I want it to fit in all type of resolutions, but impressively, it is overextending a bit on all screens.
This is my CSS:
body {
background-image: url("../testes/jogo.bmp");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
I guess there has to be a mistake with the code, but yet every time I read it I feel it's ok but obviously it's not.
Try This :
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Frorm the docs:
Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
If you want the image to be fully in view, you can use
background-size:contain;
Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
body {
background-image: url("../testes/jogo.bmp") no-repeat center center fixed;
background-size:cover;
}
you can see here
Try This Code:
body {
background-image: url("http://miriadna.com/desctopwalls/images/max/Natural-dam.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
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 have used a background image on body to cover full screen but it is partially hidden by container-fluid class from bootstrap3.
body
{
background: url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center
}
Screenshot:
CSS:
body {
background: url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg");
background-size: cover;
background-repeat: no-repeat;
}
JSFIDDLE: https://jsfiddle.net/rts05xt2/
I want that the image to be full width and full height, and if someone resizes the browser, the image will not resize again, just stay like that. Any suggestions?
You can apply the below CSS :
body {background:url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg") no-repeat center center fixed; background-size : cover}
html {
background: url(images/ho.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is the perfect way
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;
}