I know there are already a zillion questions and answers concerning CSS background-image, but I cannot find the proper answer, unfortunately; above that, some of the answers are quite old...
My CSS:
#showcase {
min-height: 500px;
background: url('../img/P1220784--grijs-1920.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
color: #a21a21;
background-color: rgba(255, 255, 255, .9);
font-weight: 600;
}
Almost perfect for me, except that, on resizing, the image gets cut off on the sides. The image is a photo of people, so I want all of them shown!
(I should have added that the image I use is 1920 * 798 pixels)
Can this be done?
Thank you,
Ad
Try this
background-size: contain;
You can use background-size: auto 100%;
Hi You can try live all possible properties attributes of "background-size" in browser.
Background-size : 100% -Make Image cover whole div but Image will Stretched.
Background-size : coved - Make Image cover whole div with responsive cutoff functionality.
Background-size: auto/contain - Set Image responsibly according to height width on div but not cover whole.
Actually, I have chosen to follow #Dejan.S' suggestion. The img as an HTML tag, and not use it as background. Makes my life a lot easier!
Related
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
Right now my wordpress site is set up so the images scale when the screen size changes. I was hoping that, instead, the image can remain at a specific size in the center of the screen and become cropped equally on the left and right when the screen size changes.
I have tried max-width:none but that doesn't keep and crop the image in the center of the page.
Site: Zxndesignco.com
The image in question is the only image on the home page. I only know CSS so I was hoping there is a CSS solution.
Example of what i'm taking about: https://gatewaydemo.wordpress.com/
Thanks for the help.
The general idea is to not use an image, and make that image the background-image of that hero section instead. So delete the img tag and add something like this CSS to .sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover
body{
background-repeat:no-repeat;
background-position:center center fixed;
background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.white{
font-size: 24px;
color: #fff;
}
<div>
<p class="white">Here are some words</p>
</div>
Usually in the body or in a div. I like this group because it covers all the browser bases.
Can someone please let me know what the 20% does in the following style?!
background: url('header.jpg') no-repeat 20%;
padding:500px 0;
background-size: cover;
background-attachment: fixed;
Thanks.
it should be position of background image:
background: color image position/size repeat origin clip attachment initial|inherit;
http://www.w3schools.com/cssref/css3_pr_background.asp
It sets the background-position-x property of the background image 20%, which moves the image to the right by 20%. Although using it with background-size: cover and background-attachment: fixed doesn't make a lot of sense.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I have a map image which I would like to use as the background for my website. I would like it to cover the whole background (no white space, no scroll bars - most of the time, more on that later). However, there is a section of the map which I would like to never be cropped as I plan to overlay it with other information.
I have tried the following css:
html {
background: url('../images/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
}
Can be seen in this fiddle. The section I'd like to keep is the large yellowish section to the right of the image.
This works quite well for keeping the section of my background image in the frame most of the time but it still gets cut out when the window is resized to very short or very wide. In this situation I would like scroll bars to be introduced so that the whole 'focal point' can still be seen.
I know this is pretty niche but I was wondering if anyone can see a neat way of doing this?
If you know the size of you background pic, set min-witdh and min-height with that.
html{
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ;
min-width:1000px;
min-height:300px;
}
Updated Fiddle
Place the background image in a container, and give it a minimum width and height, with overflow set to auto. So when the size of the browser forces the container to be smaller than you'd like, scroll bars appear allowing the user to pan the map.
<div class="map"></div>
and your CSS:
div.map {
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
overflow: auto; <-- this will enable scrollbars on overflow
min-height: 400px; <-- adjust this to taste
min-width: 400px; <-- and this
}
body {
margin: 0;
padding: 0;
}
Update to your fiddle here:
http://jsfiddle.net/xkcsu5st/2/
You could always augment this with a bit of script to control the scroll position of the map, so that the portion you want visible is always in view.
Here's a jQuery library that does it with images instead of background-images:
https://github.com/jonom/jquery-focuspoint
It might not be the best answer in time but it seems to be for now. I'll post another answer if I have one for I think there might be a better way which I'm researching at the moment :)!
I am trying to achieve something like this with CSS:
I'd like to keep the body background image fixed on fullscreen, this is sort of done by the following code:
body
{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
Now I can verify the window is indeed filled up with that image, at least this works on my Firefox 3.6
However, it screwed up when I tried to zoom in/out (ctrl+-/+), the image just is stretched/shrinked as the page zooms.
Is there a better way of doing this purely with CSS? I didn't find a good property for the background-image.
Or should I start thinking about jQuery to manipulate the width and height on the fly? They were both set to 100% so I reckon that should work "as always" :(
Thanks for any suggestion in advance!
there is another technique
use
background-size:cover
That is it
full set of css is
body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Latest browsers support the default property.
I've used these techniques before and they both work well. If you read the pros/cons of each you can decide which is right for your site.
Alternatively you could use the full size background image jQuery plugin if you want to get away from the bugs in the above.
You can do quite a lot with plain css...the css property background-size can be set to a number of things as well as just cover as Ranjith pointed out.
The background-size: cover setting scales the image to cover the entire screen but may mean that some of the image is off screen if the aspect ratio of the screen and image are different.
A good alternative is background-size: contain which resizes the background image to fit the smaller of width and height, ensuring that the whole image is visible but may lead to letterboxing if the aspect ratios are different.
For example:
body {
background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
background-size: contain;
}
The other options that I find less useful are:
background-size: length <widthpx> <heightpx> which sets the absolute size of the background image.
background-size: percentage <width> <height> background image is a percentage of the window size.
(see w3schools.com's page)
Add this in your css file:
.custom_class
{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and then, in your .html (or .php) file call this class like that:
<div class="custom_class">
...
</div>
Here is the simple code for full page background image when zooming
you just apply the width:100% in style/css thats it
position:absolute; width:100%;
Use Directly like this
.bg-div{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
or call CSS separately like
.bg-div{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}