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.
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;)
I'm setting up a new Wordpress site and am stuck on how to position my logo (header image)/background image. The photo below is how I want it to look & how it currently appears on a desktop. However, it gets cut off on mobile and I think it has to do with how I set it up...
My header image is actually transparent and what you see is the background image. So my question is, is there a way that I can position it properly on mobile devices too? Or, is there a better way to do this?
The reason I chose to set it as the background image rather than a header image is that I wasn't sure how I could get it to actually touch the top of the page if set as the header image.
If you want to see my actual website, it's here. I'm using the Brunch Pro theme.
Any help or ideas would be very much appreciated! :)
Add this css to active theme style.css file.
#media (max-width: 767px){
body.custom-background {
background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
background-position: 50% top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 70% auto;
}
}
I'm trying to get a background image to position correctly on a mobile view. When I look at the website with inspect (or re-sizing the monitor to be a mobile view), the image shows fine. However, when I view it through a phone, the image, for some reason, seems to be re-sizing to fit the phone width instead.
#hero{
height: 100vh;
max-width: 100%;
background-image: url('http://i.imgur.com/molLHMj.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div id='hero'>
</div>
</body>
If I remember correctly, setting background size as cover would make it so that if the image is bigger than the screen width, it'll simply be hidden, but this seems to be resizing for some reason.
Edit:
Setting background-size to auto displays the image like how it looks like in chrome's inspector. This shouldn't be the case, as the wider version displays the full width/height (given that it's auto). I'm really lost on what is going on.
Edit2
Looks like only the chrome mobile version displays it that way. The default browser renders the background just like how it looks like in the desktop inspector. Really weird.
The image is resizing because you are telling it to with height: 100vh;. Additionally, the image is getting skewed because you are placing a restriction on the width with: max-width: 100%;.
Setting just max-width: 100%; (and removing the height:100vh) or removing both lines and just sticking with background-size:cover could clear this up.
But, if you want the background to cover the entire viewing area, don't place the background on the div. In fact, get rid of the div and just apply the background to the body.
Also, background-size:cover does not cause the image to hide, it causes the image to resize to cover the background available. This results in cropping when the background size is smaller than the image.
From MDN:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
You can achieve your goal like this:
.hero {
height:100vh;
width:100%;
}
.hero:nth-child(1) {
background-image:url('http://placehold.it/1920x1080');
background-size:cover;
}
.hero:nth-child(2) {
background-image:url('http://i.imgur.com/molLHMj.jpg');
background-size:cover;
}
<div class="hero"></div>
<div class="hero"></div>
The problem seemed to be the size of the image. It was around 3000 in width. When I resized it to around ~1900, the behavior returned to normal.
My basic objective is to have a black box with an image (prepared by javascript) loaded inside it. I want both the image and the box to be responsive (scale properly in all resolutions), but I want the largest width of the image to be a certain size. So far here is my code:
<html>
<head>
<style>
#mybox{
background: #000;
padding: 10px;
}
#picturesettings{
max-width: 365px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="mybox">
<div id="mypicture">
</div>
</div>
<script>
var mypicture=document.getElementById('mypicture');
var newpicture=document.createElement('IMG');
newpicture.id="picturesettings";
newpicture.alt="new picture";
newpicture.src="/path/to/image.jpg";
mypicture.appendChild(newpicture);
</script>
</body>
</html>
My objective is successful except that the picture loads after everything else loads which will trigger a "prioritize visible content" issue in google's page speed insights because the outer box will need to be resized once the picture is loaded.
Is there a way where the picture can load so that the initial sizing of the outer box only needs to be done once instead of twice?
See this URL if you want to see the "prioritize visible content issue" in it.
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnew.clubcatcher.com%2Fm%2Fpictures%2Fstudio-entertainment-theatre%2F2016may06%2F1
It is my website in which the box is sized depending on the size of the image.
I feel my only solution is to make the black box height the maximum height so that the photo will nicely fit inside regardless of its size, but the problem with that implementation is that users on devices with very small screen widths will see the picture at a decent size, but they will see a bunch of black space that they must scroll through to get to the text which is also what I don't want.
Is there any way I can fix this?
why not giving a height to the DIV and put the image as BG like that there will be no white space under it, i would imagine something like the #mybox with a border: 10px solid #000; and then have the image as background to #mybox and give it a background-size: cover; also u can modify the height of the box with media queries for other screen sizes if it does not look good.
I cannot seem to get my background image to stretch vertically (with CSS) and have not been able to get it.. What's the best way to do this without using a jquery plugin?
http://realestateunusual.com/
Currently have
div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}
Although the question is unclear, I assume you want the houses to appear at the bottom of the page?
The body does not fill the screen unless it has to. Thus, your whitewrap div only fills 100% of the body.
Either you need to set the body height to 100% too (although this is slightly hacky) or set the background of the body to the image. This will then have the background image at the bottom of the screen (despite the body not being the full height - confusing right?).
Your HTML is hard to inspect however, due (I assume) to the software you used to create it adding in more divs than I thought possible!
EDIT: after closer inspection, it looks as if you need to set the background-position attribute to force the image to the bottom. Then, you can set the background-color to be the same as the colour of the sky at the top of the image. This should create the effect you desire without having to actually stretch & distort your image.
You can do this completely using CSS: using the background-size attribute.
body {
background-image: url(http://placekitten.com/250/150);
background-size: 100%;
}
See http://jsfiddle.net/5TSVP/.
You should look into Media Queries in your CSS and store different resolution images for major platforms. The images can then resize between with browser.
Media Queries: http://www.w3.org/TR/css3-mediaqueries/
#media (min-width:800px) { background-image: url(bg-800.jpg) }
#media (min-width:1024px) { background-image: url(bg-1024.jpg) }
#media (min-width:1280px) { background-image: url(bg-1280.jpg) }
CSS for img tag to let it resize:
img { max-width:100%; }