I'm trying to display a background image with the following CSS code in the header.
body {
background-image: url("./image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
It works perfectly on desktop, even when I resize the browser window but when I try to access it on mobile, the image gets distorted and stretched to no more than a few pixels at the top of the screen.
Thanks in advance!
Use background-size: 100vw 100vh
body {
width: 100%;
height: 100%;
background-image: url("https://www.highreshdwallpapers.com/wp-content/uploads/2011/09/Large-Format-HD-Wallpaper.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100vw 100vh;
}
<body>
</body>
Related
I am having this problem, I have an image that I want to get full widht and height of a div showing always the center of the image, and it works perfectly on desktop browsers, even when I resize the window to a mobile size, but in Android browser it always shows the right side of the image and I cant achieve to make it work.
Here is the code:
<div class="main-content" style="background-image: url(<?php echo get_field('imagen_portada')?>)">
And the CSS:
.main-content {
width: 100%;
background-size: cover;
background-position: center;
min-height: 100vh;
}
To me it doen't make any sense that this is not working.
EDIT: BTW, if I use "background-position: left" the image get shrinked and if I use right the image just don't show at all, all of this in Chrome for Android, in desktop browser it all works just as it should.
background-size: cover used in combination with background-position: center to zoom/scale the background images. For full-width/fit-to-screen background image, you can use background-size: 100% 100% or background-size: 100vw 100vh. Look at this post to understand the difference between cover and 100%?
.main-content {
background: url("//via.placeholder.com/1000/4B89DA/4B89DA") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width: 100vw;
min-height: 100vh;
}
<div class="main-content"></div>
I'm trying to learn html and css. Right now I'm trying to make a background image fill the browser window no matter the size.
I've googled it 100 times and every page pretty much says the same thing. So I copied the code and it isn't working for me. When I set my browser to a smaller size, the background image repeats itself. Which I don't want I just want it to fill the window.
Here's my css.
html {
background-image:url(background.jpg);
background-size: 100%;
background-image: no-repeat-y; }
Before I did 100%, I tried using cover instead and that didn't work either. The image is fullscreen when the window is maximized but when I resize it the image will repeat.
Using background-size cover will do the job:
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
To scale, the CSS you want to scale needs to be inside a container itself, namely BODY inside the HTML container; try this:
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image:url(background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat-y;
}
You need to specify a height of 100% to the parent div <body> so that any child div with a height: 100%; will take the height of it's parent div. Here's an example:
Wrap your content in a parent div like this:
<html>
<body>
<div class="wrapMeTight">
....Your page content....
</div>
</body>
</html>
And add this to your css:
html, body {
height: 100%;
}
.wrapMeTight {
min-height: 100%;
height: 100%;
background-image: url (/img.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Use this:
<html>
<head>
<style type="text/css">
body { background-image: url("background.jpg"); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; width: 100vh; }
</style>
</head>
<body>
</body>
</html>
I have a photo type (not landscape) background image with 979px width by 1200px height. I would like to set it to float left and show 100% full image height fixed, without the need to scroll up/down (regardless of content length).
This is my CSS code, but it is not working:
img, media {
max-width: 100%;
}
body {
background-color: white;
background-image: url('../images/bg-image.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
You can do it with the code you have, you just need to ensure that html and body are set to 100% height.
Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/
html, body {
height:100%;
}
body {
background-color: white;
background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
CSS can do that with background-size: cover;
But to be more detailed and support more browsers...
Use aspect ratio like this:
aspectRatio = $bg.width() / $bg.height();
FIDDLE
body{
background-image: url("your_image_src");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
}
it can cover full height and width as well
html, body {
height:100%;
}
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;
}
This worked for me (though it's for reactjs & tachyons used as inline CSS)
<div className="pa2 cf vh-100-ns" style={{backgroundImage: `url(${a6})`}}>
........
</div>
This takes in css as height: 100vh
I want to stretch image when content of html is increase. And whenever content is increases then automatically background image stretch without repeating in css. In Html pages.
Check this out!
Here is my CSS:
div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
min-width: 200px;
min-height: 300px;
background-size: 100% 100%;
}
background-size: cover; will also work, with a slightly different effect.
Here is my suggestion to avoid stretching:
div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-position: 50% 0;
background-size: 100%;
}
http://jsfiddle.net/Riskbreaker/mx8rr/1/
We can stretch background image when add large content without repeating image in css
please try next:
background-size: cover;
or
background-size: contain;
In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/
Simply add the background-size:100% style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Regarding to this article, you should to use cover as well:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use background min-width:960px; instead of width:100%;
Cheers