I am using a image like background for my web site
I put this to cover all page with the image
body.questionary{
background: url("../img/ques.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my image is a jpg the dimension is 703x883 and the size is 258KB
the problem is that when I see the page this image is very big, like a zoom , I dont see the image complety I only the top of it.
any idea!
If you page is very tall, the background-size:cover will make the background image to scale so that it fills the whole body.
if you want it to fill the viewport only, then you will need to add inside another element (not body) and style that
<body>
<div id="background"></div>
...
</body>
and
#background{
position:fixed;
z-index:0;
top:0;
right:0;
bottom:0;
left:0;
background: url("../img/ques.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
use background-size:100% 100%;
example jsfiddle
the values contain and cover maintain aspect ratio as defined by the spec
‘contain’ Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’ Scale the
image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely
cover the background positioning area.
Related
I am trying to make a background image of the particles JS responsible. Thus I used this code:
#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
but when I resize my browser I get this result:
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?
See if this helps: http://codepen.io/panchroma/pen/ggMYBQ
The key detail is to apply the background image to an element that covers the full height of the screen, eg html
CSS
html{
background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had to set 4 pages with 100% width and height background depending of the screen size.
The imgs have got the same width and height and these are my settings,
.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
this is working perfectly for few pictures but not with others, how is that possible if the pictures got the same dimensions?
I tried to do background-size: cover which is working for a while but then it will cut off the img so the best way so far is that one i wrote above.
I am talking about big screen sizes from 1440px to 2560px.
Thanks a lot
You can have a look at the headers here: http://provaresponsive.herokuapp.com/pr.html
As mentioned in the comments if you want an image to always use all available height and width, then you have to decide: Do you want the image to retain it's aspect ratio - then it has to be cropped, or do you want the image to change aspect ratio, in which case it will stretch.
Here is an example for each option:
No Stretching - Will Crop
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jsfiddle
Stretching - No Cropping
div {
background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
/*
* Width & Height can be percetages only when the parent
* element has explicitly declared dimensions.
*/
height:200px;
width:500px;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
jsfiddle
And there is a third option, you probably won't like, which is to contain the image, so:
No Stretching, No Cropping - not filling the x/y
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
jsfiddle
use backstretch js .it can fix your issue.if you call your background image using backstretch js then it will automatically adjust your image according to your screen ,whatever your image resolution is
Here's the original image (2880 x 900):
And here's how it appears on the rendered page (1280 x 500):
1280 x 500 is the dimension of the <div> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a background-size: cover is meant to scale the image up or down without cropping. Why is it not working?
HTML
<div class="page-header-div">
<div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
<div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>
CSS
.page-header-div { position: relative; }
.page-header-div-image-blog {
background-size: cover;
height: 100%;
}
The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).
You have to use background-size: contain; instead and also set background-repeat to no-repeat.
From MDN background-size docs:
cover: A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
Also note that, as #zgood pointed:
2880 x 900 is a different aspect ratio than your div at 1280 x 500, so event when you use contain you will have a gap
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
See also:
Scaling background images (MDN)
I was having this same problem. It turns out that I had my background-size declared before my background. See example:
DID NOT WORK:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(../img/background.jpg) center center no-repeat;
WORKS:
background: url(../img/background.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div></div>
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;
}
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.