I have this css code, that creates an triangle and an background image fixed:
.post-wrapper_pic2 {
position: absolute;
width: 922px;
height: 1550px;
-webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
background: url("http://krishnaeverson.com/wp-content/uploads/2014/01/universe.png") center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10px;
}
But the problem is that the image is beeing resized and even though i put a hight quality image as background it appears pixelated. Can you figure what's wrong in what I'm doing?
You were apparently wondering that a CSS property named background-size leads to resizing of the image … so you should’ve just looked up what it does.
background-size:
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
Related
I am trying to get a background image to cover the entire window but am having trouble getting it to behave the way I'd want.
I currently have
'background-size': 'cover'
However, I find when shrink the width, the image tiles.
So I changed it to:
'background-size': 'cover',
'background-repeat': 'no-repeat'
But now, just white space appears below the image.
So then I tried
'background-size': 'fill',
'background-repeat': 'no-repeat'
However, now when the image is smaller than the window, it doesn't expand to fill the window.
What is the best solution so that the image covers the entire screen, doesn't tile, and doesn't have white space regarldess of the size of the image?
You could explicitly set the size of the background to cover the entire viewport by setting the height to 100vh (i.e. 100% of the available viewport height). This coupled with background-size: cover should handle your scenario :
body {
background: url('{background-url}');
background-size: cover;
height: 100vh;
}
Example
You can see an example of this in action here and demonstrated below :
Try this:
html {
background: url(...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Should work with Safari 3+, Chrome Whatever+, IE 9+, Opera 10+, Firefox 3.6+
Source: css-tricks.com
you have to give him
height: 100vh
body{margin: 0px;}
div{
background-image: url(https://placekitten.com/400/600);
background-size: cover;
background-position: center;
height: 100vh;
width:100%;
}
<div>
</div>
A friend of mine has set up a little landing page and is asking me about an issue on mobile (Chrome). The background image (on the body) is set to cover
body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
The background image will render within the full viewport, but if I scroll down, it is kind of cut of, check the images down below to see what I mean (the gray block). He is asking for my help but I really don't know what could be causing this. I tried to remove the footer (and set the body height to 100%), but it did not change anything.
Solved
Fix: Looks like fixed background do not work on mobile browsers. This fixed it:
background-attachment: scroll;
CSS background image to fit width, height should auto-scale in proportion
body {
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'm trying to make my background image always 100% width, but it's not working. With my current code, I get the picture where I want it, but there's a bunch of unwanted dead space (all the yellow background below pic). Overflow options don't fix this.
If I leave out the fixed height/width, then the image takes on 0x0 size for some reason; if I use background-size: cover, the image becomes too large, and no longer sits well in my parent container
jsFiddle:
http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/
.mainpic {
background-image: url('http://www.placehold.it/1922x1080');
width: 1922px;
height: 1080px;
background-size: contain;
max-width: 100%;
max-height: 100%;
background-repeat: no-repeat;
}
You can simply do:
background-size: 100% 100%;
This will keep the background image stretched 100% to the size of the container it currently is in. So, if it is in the body, it will fill the whole background of the page.
You might be interested in the cover declaration.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Do anyone has similar experience and has the solution?
I use below CSS to display an background image on a mobile, of course I do declare
I could not able to display the image according to screen's height and width, if I remove the "background-attachment: fixed", then image is resized according to the screen's height and width but image is center according to the length of web content instead of the screen.
Do anyone have better solution?
#home {
background: url('../images/hkfmpt_trans.png');
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
background-size: contain;
}
try this
html {
background: url('../images/hkfmpt_trans.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i want my background to scale in width but not in height.
i got following code now.
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;
with this code the backgroundimage scales the whole thing but i only want it to scale in width. Does someone have a solution?
greetings
Instead of cover, you can try something like this.
background-size: 100% $IMAGE_HEIGHT;
Where $IMAGE_HEIGHT is the height of the background you are working with.
JSFiddle
You can either try to use the background-size property and set/stretch the width, or if it works in your case, try the background-repeat property with value repeat-x:
{
background-size: 100% auto; # width and height, can be %, px or whatever.
}
{
background-repeat:repeat-x;
}