I would like to place a background image on the body element to be stretch on the entire browser screen.
The problem is that while doing this the image getting some "zoom in" and image is cutting due to this.
For example let take this current image:
http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg
And see how its zoom the image and cuts some parts around.
I've tried to play with the CSS background cover features but with no luck.
body {
background-image: url('https://i.stack.imgur.com/7xThY.jpg');
background-size: cover, 100%;
background-position: 50% 50%;
background-attachment: fixed;
}
Try this it might work
<html>
<head>
<title>This is a test page</title>
<style>
body {
background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
background-size: 100%;
backgroun-reapeat:no-repeat
}
</style>
</head>
<body>
</body>
</html>
body {
background-image: url('https://i.stack.imgur.com/7xThY.jpg');
background-size: 100vw 100vh;
background-position: 50% 50%;
background-attachment: fixed;
}
probably this what u looking for ! but this will change image aspect ratio!
did you mean something like this?
html{
min-height:100%;
position:relative;
}
body {
height: 100%;
background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
}
i didnt put it in a snippet because the code doesnt work in it. i tried it in chrome, firefox, edge and even internet explorer and it seems to work fine. hope this helps.
Related
I want to have my background picture fill out the whole screen but I can't find a solution to fix my problem. Would be cool if someone could give me a solution for all mobile devices.
This is what my screen would look like now:
I tried many things. Here is my current code:
html {
background: url('/path/to/img') no-repeat center center fixed !important;
background-size: cover !important;
height: 100%;
}
Try :
html { background-image: ...
no-repeat;
background-size: cover;
width: 100%; }
I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.
My CSS code:
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg"></div>
Just ask me if you need any more code from my website.
Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.
This works fine if you use fixed height:
In the below case I have used 100px;
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
But if you want it to be 100% of the screen you can always go with 100vh
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
If you want to know more about vh visit this link
Hope this was helpful for you.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");
}
so maybe you can change your code become :
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
If you want to add background image to whole HTML Page then use body tag.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}
and if you want to add background to specific class then use this
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}
in that adjust your height accordingly. if you want to add to full class then use
height:100% else adjust it with your own condition.
The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by #weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
width:auto;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
<div class="bg"></div>
The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.
If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
height:480px;
margin-left:auto;width:100%;margin-right:auto;
background-position: center;
background-repeat: no-repeat;
object-fit:cover;
}
<div class="bg"></div>
I have a large background image that is fixed with text being displayed on top of it, however the bottom of the image is being clipped off. I want the image to be displayed completely and not be cropped off.
#content {
background-image: url(../images/bean.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Set background-size to be 100vw 100vh i.e background-size: 100vw 100vh;
#content {
background-image: url(http://lorempixel.com/1400/1400/sports/3/);
background-repeat: no-repeat;
background-size: 100vw 100vh;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Checkout this DEMO: http://jsbin.com/buqaju/1/
To have the background always cover the whole container you can use:
background-size: cover;
Source: http://css-tricks.com/perfect-full-page-background-image/
Pay attention to browser support: http://caniuse.com/#search=background-size (hint: No IE8)
Also, I noticed it's not very performant on pages with a lot of transparencies and moving backgrounds, but other than that I use it quite a lot and it works well.
Increase the height?
height: 100em;
you have
background-size:100%;
use
background-size: 100% 100%;
.bg_care{
background-image: url(../img/care-area.jpg);
background-size: cover;
}
just use background-size as cover it wont cut off.
You could also modify your background as such:
background: url(xyz.jpg) no-repeat **center center** fixed;
where you change the center values as needed (left,right,bottom,top). Depending on the image it may be useful.
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%
I would like to know how I can scale a picture or a background based on the width of the browser. Basically, I want to make it as responsive as possible and making sure that it adapts well to all browsers including Safari.
Here's an example of what I'm talking about.
Link: http://responsive.gs/. Resize the width of the browser to see the background scale.
I want to make my picture/background scale exactly as shown in that link above.
Would appreciate some help on this.
Thank you.
Use background-size:cover, as they did:
body {
background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
background-size: cover;
}
EXAMPLE HERE
I'd also suggest taking a look at this recent SO answer of mine, which demonstrates how to get the height of the rendered background image, and scale the background accordingly:
Getting the height of a background image resized using "background-size: contain"
JS:
var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");
$(window).on("resize", function () {
$('body').height($('body').width() * img.height / img.width);
}).resize();
We can try background-size: 100% 100%; to fix it.
body {
background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
background-size: 100% 100%;
}
Using the code from the example you can use it in a page like so:
<head>
<style>
body
{
background: url("http://www.responsive.gs/images/bg-phoenix.jpg") no-repeat;
background-position: center top;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>