So I want to do something like this, having an image as the fullbackground of a website.
However, I keep trying and trying with ridiculously huge images (The one on my JSFiddle is 6000 x 4000 I think) and they're all still small and get on low resolution when I scale them to fit the website.
Here is my JSFiddle showing my CSS code.
body {
background-image: url(https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
}
Any help appreciated.
The background cover approach is correct and the resolution of the image shouldn't matter if not for the quality of the image itself (you can have a 400px image fill a 3000px element).
The image will always adapt to fill its container and what I noticed in your fiddle is that the container of the image seems to be the problem, not the image itself.
here's your fiddle, edited with the background element height and width set.
{
height: 100vh;
width: 100vh;
/* Bonus: I think you want your background centered, as in the example that you provided */
background-position: center center;
}
https://jsfiddle.net/edLm73r2/
The image you are used on the example fiddle is very small(768 x 512)
https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690
Go for some large image if you want to make it as full screen background. May be use this one from unsplash https://unsplash.com/photos/It0DCaCBr40
body {
background: url(https://source.unsplash.com/user/nolanissac/It0DCaCBr40) #464646 no-repeat;
background-size: cover;
}
It looks like wherever the image is being hosted is not serving the full resolution of the image or quality.
I found the image you are using from a stock image site here and downloaded a re-uploaded so it stays it's full size.
body {
background-image: url(https://i.lensdump.com/i/itbHyH.jpg);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
background-attachment: fixed;
}
This seems to be a common question but the existing answers I see do not seem to work for me. I have a background image that is much taller than it is wide. I would like the height to be 100% of the height of body. So far I have tried:
body, html {
height: 100%;
min-height: 100%;
}
body {
background:url("NewLogo.png") no-repeat center center;
background-size: 100% auto;
}
I have also tried changing background-size: cover; but this also just makes the image large but cuts off the top and bottom.
Use contain. This will guarantee that the entire image appears in the container, and nothing is cut off:
body {
background:url("NewLogo.png") no-repeat center center;
background-size: contain;
}
Please note that if you want to have a background image which is cover and has got it's own height (without just being large, as wide as your browser but loosing the top & bottom as you said), you can try giving an appropriate height in vh to your background image.
body {
margin: 0;
}
#image {
background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
background-repeat: no-repeat;
height: 293vh;
background-size: cover;
}
<div id="image">
</div>
Otherwise if you just want to make your background image cover, or if you want make it contain(though your image wouldn't fit the browser wide, it would be in it's real height), you can visit the following link:
codepen>background-size>CSS-Tricks
I have a background image on my front page which is supposed to cover the entire screen.
It's a fairly large image, 2560x1714
However, most screen resolutions won't match that. And when the aspect ratio is at it's max. It starts "zooming" in on the picture, to fill it to the width of the screen. However, when it does this, it zooms in on the top of the picture.
I need it to zoom in on the bottom, as that's where I want the focus to be.
Here's an image of what I want to see: (the beach basically)
However, when I make my browser wider, it "zooms" in on the top of the image.
It's completely fine that it changes how much I can see of the image. But I need it to be opposite of what it does now. So the beach is always at the bottom of the screen no matter what.
Here's the CSS for my header:
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #FAFAFA;
background-image: url("../img/header-2.jpg");
background-position: top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover
}
Any ideas on how I can make it, so I see less of the sky, instead of less of the beach/surfboard?
Thanks for your help!
background-position: top;
to
background-position: bottom;
So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?
I have a regular <div class="bgimage></div> in the html and the css looks like this:
.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.
Thank you.
If you're setting the background for the whole page, just style the body element instead:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
http://jsbin.com/rugom/2
I have
body {
background: url(images/background.svg);
}
The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?
At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.
Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.
There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation for contain and cover
Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.
contain
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.
This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:
cover
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.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:
Demonstration with actual code
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Background image is not Set Perfect then his css is problem create so his css file change to below code
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Read the descriptions for each of the articles and see if they're what you're looking for.
The first answers the following question:
Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.
The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "
Hope this helps.
Just add this one line:
.your-class {
height: 100vh;
}
vh is viewport height.
This will automatically scale to fit the device' browser window.
Check more here: Make div 100% height of browser window
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
Try this,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
I had the same issue, unable to resize the image when adjusting browser dimensions.
Bad Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Good Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
The key here is the addition of this element -> background-size: contain;
Here's what worked for me:
background-size: auto 100%;
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
if you set min-height, for example:
min-height: 100vh;
You can use the below code to fit your background easily
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
Setting background size does not help, the following solution worked for me:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.