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
Related
Yesterday I visited Artstation and I noticed a cool effect on the main background image at the top for each profile on Artstation. If you resize the window from desktop size to the left and make the window smaller, the image starts to resize and at approximately 1430 px inner size and end at approximately 1010 px inner size and after that it stops resize. The resizing is just like when you resize a common image, but this is a background image. This effect is nice for a responsive design.
I have tried to inspect the CSS, but I can't find the answer. Someone who can tell me how this is done?
This is a randomly selectedthe profile that I was looking at to show what I mean:
https://www.artstation.com/gaelleseguillon
When I try to use a background image I use this code:
.topContainerBackground
{
background-image: url(../imagesLayout/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
height: 600px;
width: 100%;
position: relative;
}
But as I wrote, I don't get the resize thing at approximately 1430 px inner size.
background-size: cover; is the key here. 1430px has no real significance, it's a function of the proportions of the background image.
When a window is really wide, cover background sizing is mostly responding to the vertical height of the container, stretching the image to match vertically.
Once you start shrinking the window, there comes a point where height is no longer the primary concern, width is. That is where the image seems to begin scaling horizontally.
I'm not actually a front-end developer, but I've been asked to do the css for a responsive web-application. Mostly I've managed to piece everything together using getBootstrap and stackOverflow, but I've run into one issue that I've not been able to find a solution for.
Namely; the design calls for a responsive full-width background image across the top of the home page. Fixed-height, to be cropped when the page narrows.
No problem in itself, but the smaller-size design for the same page calls for this image to be cropped to a slightly off-center position, like so:
There's plenty of code samples on how to lock the image to the left of the page and have it crop from the right, or center the image and have it crop from both sides equally, but I can't for the life of me figure out a fluid way to have the image crop about 33% from the left and 66% from the right.
Is there a reliable way to do this, and/or would there be a clever workaround?
The key to this is the background-position property in combination with background-size: cover.
background-size: cover tells the browser that you want the image to expand to fill the available space, and let the extra parts of the image be cut off outside of your box.
So if you had a <div> with 200px width and 200px height and an image that was 1000px wide by 500px high then it would shrink down to 200px high and 400px wide.
The next question is how do you choose which parts of the image are shown and which aren't? That's where background-position comes in.
You can set this as something simple, like background-position: center center; which centers both vertically and horizontally and is often the desired outcome. For your situation though, you want to use something like this:
background-position: center left 33%;
This will make your image centered at larger screens and when there's more width than the container (e.g. <div>) needs then it'll move it to focus on 33% from the left.
Here's a full example:
HTML:
<div class="hero"></div>
CSS:
.hero {
height: 500px;
background-image: url("[your-image-url]");
background-size: cover;
background-position: center left 33%;
background-repeat: no-repeat;
}
Hope that makes sense. Here's a codepen showing it in action.
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.
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
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;
}