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.
Related
I want to display a bunch of images stored on a server. The images are taken from a user's phone and the dimensions and aspect ratio are unknown.
I just want to have an image fully fill a DIV while maintaining its aspect ratio. If the image is wider than taller, I want the image scaled so the height is 100% the Div and the sides would be clipped off. Similarly for if the image is taller than wider, I want the image scaled up/down so the width is 100% of the Div
Hopefully this explains it
I thought this would be pretty trivial, but here i am. I can make an image fit tall or wide but not either depending on the aspect ratio. I've tried several different methods and I am at a loss.
I have a Stackblitz Example here.
I have a 2x2 grid, and I would like to get the images to fill those grids. Some images need to be rotated. I'm not sure why they need to be as the look normal on my computer. I have a hardcoded flag to force a rotation on some images, but the rotation appears to screw up the css further on.
CSS:
.img-container {
/* height: 150px; */
width: 100%;
}
.img-container img {
height: 100%;
/* height: -webkit-fill-available; */
width: 100%;
object-fit: cover;
}
HTML:
<div class="showBorder img-container">
<img #image class="container-img-objfit2"
[ngClass]="{rotateLeft: rotate}"
[src]="imageURL" />
</div>
How can I fill these DIVs regardless of the aspect ratio?
Can I do any of this inside angular? I tried to get the image size and see if I could set custom class that would handle the rotation, but that didn't seem to work either. The dimension for all my pictures was identical. So no way to distinguish which pictures need rotation.
Or am I going about this all wrong? Ultimately I think I will have a process to scale and crop the images on the server so they are prepared for the client app.
Update:
This sample is an attempt to set the image in the background and use a :before selector to rotate the image. It does not work fully as I cannot change the image dynamically to other images.
You can just set the images as background-image for the div and set its size to cover.
So just remove the img tag and keep your div tag only
<div class="showBorder img-container" [style.backgroundImage]="'url(' + imageURL + ' )'">
</div>
In CSS you will have to specify the height and the size
.img-container {
height: 150px;
width: 100%;
background-size:cover;
}
i have a problem with an image in my website it does not appear properly in browsers the picture cuts certain areas in mobile browser
this are the images
desktop pc screen image
image on a mobile browser
this is the code for the image
section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;
background-position: center;
background-attachment: scroll;
}
#media only screen and (max-device-width: 320px) {
}
Step 1: Look up the code you are using to see what it is supposed to do:
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.
Well, it is clipping the image, and you don't want it to clip the image, so clearly cover is wrong.
Step 2: Look at the other options:
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
That might do the job.
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.
… or that (with 100% 100%), depending on what you actually want:
see here jsfiddle
do not use cover because that makes the image to be cropped
instead use contain also add background-position:top center because with contain the img resizes and the empty spaces ( top and bottom ) are filled with the background-color which in your case is transparent . so it's better to align the bck img to top and fill the bottom area with whatever you want
you can with media query set the background-size:cover on pc and contain on mobile
code :
section#landing {
width: 100%;
height: 100vh;
background: url('http://i.stack.imgur.com/fXmkE.jpg');
background-size: contain;
background-repeat:no-repeat;
background-position: top center;
background-attachment: scroll;
}
I want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.
Some detailed examples:
My image is 2000x200px
In a screen of 1600px width I want to show the central 1600px of my image, no resize.
In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
In a screen of 1900px I want to show the central 1900px of my image, no resize.
In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.
What I have so far:
Make a responsive image is quite easy
#header-img {
width: 100%;
height: auto;
}
But it always shows the full image. There are a left and a right chunk I don't want to show unless the resolution of the client screen would be really big.
On the other hand, get the "overflow" behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it's not responsive.
<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />
I need the two behaviours. Perhaps I need media-queries, but I'm trying to avoid it. I don't want any javascript code neither, only CSS.
I have seen this behaviour in some pages, but I can't find any at the moment.
EDIT: A picture speaks a thousand words
http://tomascrespo.sofiytommy.com/wp-content/uploads/2015/08/pregunta.jpg
Observe that numbers 7 and 8 are only showed in ultra wide screen
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don't want the image to stretch. What I have so far is:
#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%;
height:520px;
background-size:100% 100%;
}
At the moment this is stretching the image to 100% and making the image look stretched.
Can anyone help me with this or point me in the right direction?
Use the CSS3 background-size property. Set it to cover. Like so:
background-size: cover;
Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.