I currently have the following CSS (called splash.css):
html {
background:url(splash.jpg) center no-repeat;
background-size:auto 100%;
}
And the following HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<TITLE>Test</TITLE>
<link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
</HEAD>
<BODY>
</BODY>
</HTML>
I'm trying to get the background image called splash.jpg to always have the same height as the browser window, and to resize it (keeping its aspect ratio) and allow some of the width to remain outside the browser window. In addition, the background must be centered about the browser window.
Currently I would expect my CSS to do exactly what it's supposed to do. I've set the background to be horizontally and vertically aligned to the center, and I've set it to the image it's supposed to be. I've also set the background-size to auto 100% - which, according to Mozilla Developer Network, resizes the image exactly like I want it to be resized.
If the background-size has one auto component and one non-auto component:
If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.
The problem I am facing is that the height of this huge, 1920x1080 image, appears to be around only 50px when I open the HTML in a browser window. The width also appears to be in the right ratio to the height.
At first, I felt it might be some sort of browser-dependent bug - but the page appears pretty much exactly the same in both Chrome and Firefox!
Note - Any other SIMPLE solutions are welcome. I don't want this behavior to be Javascript dependent - but I don't mind the solution working only in the latest versions of FF/Chrome.
Add height: 100%; to your html styles.
Just use this:
body { background-size: cover; }
This is a CSS3 attribute that COVERS the page with the background image. I forget if it keeps the perfect aspect ratio or not, but it's worth a shot, buddy.
background: url('/img/bg0.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";">
Related
Sorry for my poor English. The code may describe better.
#wrapper{
display:flex;
}
#wrapper img{
width:25%;
}
<div id="wrapper">
<img src="https://www.hellocoolguy.com/t/1.png" />
<img src="https://www.hellocoolguy.com/t/2.png" />
<img src="https://www.hellocoolguy.com/t/3.png" />
<img src="https://www.hellocoolguy.com/t/4.png" />
</div>
I have a div#wrapper using display:flex, the img has 25% width, so the images can tile in a row.
It's ok in desktop browser, but in some mobile phones (or using chrome's DevTools to simulate), I can see gap between some images like below:
Some gaps seem to appear/disappear when I change the wrapper width. And it seems only happen on mobile. Desktop browsers (without chrome's DevTools to simulate mobile phones) always show the right result.
What's more, I found it would be ok if I use something like codepen (the code here). When using codepen it's even ok with simulating mobile phone using chrome's DevTools.
I don't know how to modify my code to let mobile phones show properly.
You may see it directly from your mobile phone here
Edited on 2019.09.27
This is happening in Wechat browser (using X5 browser as its core) , and this may be a round pixel rendering question/bug.
Finally:
Thanks for everyone who've helped. It has been still not resolved but I shall end it for it has cost us such a long time.
This is likely due to some discrepancies in pixel rounding.
To ensure the pixels are rounded correctly add the following in your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that Codepen automatically add this tag which is why you are unable to reproduce the issue on there.
Use background-size : cover
It will remove the space by cover your div with
the documentation
This would work:
#wrapper .img {
padding:0;
margin:0;
width:25%
}
This could be a rendering bug.
When you add background-position: right; or background-position: left; you see the problem on the other side of the your element. So the bug is that your background image with the width of 100% just is not enough to fill the box.
So you could use background-size: 101% 100%; to fix this bug. (Or
maybe 100.9% instead of 101%).
Another solution (in my opinion the better one) would be adding the same image in one box as a second background-image, but just placed on the other side.
background-image: url(sameimage.png), url(sameimage.png);
background-size: 100% 100%, 100% 100%;
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
The first background-image will be placed at the left-top-corner and the second one will be at the right-bottom-corner of your element.
In the worst case you will still have some pixels left and need to add the same image at each corner... (background-position: left top, left right, bottom left, bottom right;)
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<img id="logo-img">
</body>
</html>
CSS
#logo-img {
background: url("google.png") no-repeat;
width:100px;
height:100px;
}
When I'm trying to specify image using CSS,it only shows the portion of the image instead of scaling it accordinlgly(100x100 starting from top-left corner).Why?Shouldn't it be scaled?
A background-image doesn't scale by default. Look at the background-size property. Common values that will cause the image to scale are cover, contain, and 100%. You can read more about scaling background images here - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images
Depending on the aspect ratio of the image compared to element the image is a background of, you may also want to modify the background-position property, too. Read more about that here - https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I'm trying to create a website that has fullpage background images. I have gotten it work on desktop versions but when I push it to github and view it on my phone the background image is just a long image at the top. I'm using the background-size: cover in my css. Screen shots below.
How can I make it so on mobile it takes up the whole space? Thanks :)
Desktop version:
Mobile version:
.background1
{
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewpoint so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image
rescale based on itscontainer's size */
background-size: cover;
/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}
Html is as follows
<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>
<body id="bodyID" class="background1">
</body>
<script src="javascript.js"></script>
The problem stems from your <body> element not having the height to fit your device. You could stick a height: 100% on html, body, but I think the easier way to do this would be to add the following:
body {
height: 100vh;
}
This sets the height of the body element to 100% of the viewport height on load. I tested this out and it solves the problem on my Android device and doesn't break it on desktop.
Side note: You can debug your Android device with Chrome inspector tools by following Google's instructions.
Have you defined the min-height or max-height or height? May be u can share the Html codes to let me check. And for the background css, here's the better useful code.
background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
I am building a phonegap app for ios and i am having some problems with css image backgrounds. Say for example that i have a div that spans over 100% of the viewport. I want to use real resolution images for pixel perfection.
<div class="main"></div>
<style>
.main {
width: 100%
height: 100%;
background: transparent url('640×1136.jpg')
}
</style>
So basically i want to display a 640×1136 image as background. But the viewport is always 320px wide making the background image stretched.
Can i somehow make the web view use real pixels instead?
You can use background-size attribute:
background-size: contain
or:
background-size: cover
You have more information in "Background-size"
I have felt similar kind of problem while developing an PhoneGap application.
Try Below Solution.
Add the following meta tag to the HTML.
<meta name=\"viewport\" content=\"target-densitydpi=device-dpi\" />
Hope this will help you.
I have a website that uses an image as its background over the entire page. In order to do this, I am using the new CSS3 spec "background-size", which is set to "cover".
background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;
Generally speaking this works well, but I noticed that if the window starts to get too narrow (and this a fairly wide image, so even 1024x768 is "too narrow") then the image stop filling the page and instead I see the background color of the page.
This kind of destroys the look of the page. While I suppose I can get creative about both the size of the image and the overall design of the page, it would be nice if this worked as expected. I'm OK with the image spilling over or getting clipped, but I'm not OK with it being too small and leaving the page background showing.
Is there a way to set this up so that doesn't happen?
An example was requested, so... here is the image I'm using:
http://i.imgur.com/igLMC.jpg
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(house.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
I put an obnoxious red background behind the image to demonstrate the problem. If it is working properly, you should NOT see the red. So run the above, and then resize the browser so that it is very thin, and tall. You will see lots of red under the picture. THAT's the problem.
As an update, upon more testing, removing the DOCTYPE seems to fix the problem. I am not smart enough to tell you why. :)
I haven't implemented a css-only way to do this, but I did use the backstretch jQuery plugin once, and it worked across the board. http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/
Just set the height or min-height of the html:
html {
min-height: 100%;
}
body {
background-image: url(http://i.imgur.com/igLMC.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: red
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>