The full image is not displayed properly, the bottom of the image is missing, how can I display the full image on screen? (dimensions: 5904 * 4000 px)
I tried with object fit but its not working:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100vh;
background: url("adult-blur.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
object-fit: cover;
object-position: bottom top;
}
I also shared a video of this problem in facebook: here
You cannot have both:
The image show fully
Have the image cover the entire background
Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.
Your options are:
Have the image always be full-width using width:100%. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport.
Have the image always be full-height using height: 100%. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport.
Use backgorund-repeat to have the image repeated vertically or horizontally to cover any whitespace.
Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.
Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.
Check out this code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#body-container {
width: 100%;
height: 100vh;
background: url("j.jpg") center center no-repeat;
background-size: cover;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body-container">
<!-- Place your document contents here -->
</div>
<body>
</html>
Here we used bootstrap-4. Put all contents of document body inside div container. In styles, background-size is used to make our image 100% in width n height. If it image stretches absurdly, you can also try background-size: cover.
Finally, overflow-y property is used to make our div scrolls vertically
Related
Struggled for a solution the first time so I am posting again with more info. Thanks in advance for your feedback.
On the website I am building at the moment I have 2 background images set to 2 different divs but they need to line up perfectly on all devices.
At the moment the background images line up at 1920px wide and smaller but once you start going larger than that it starts shifting.
Please could someone help?
Please see an image here that it should resemble
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
#media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}
#media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}
.mc-key-points {
background: none;
}
}
<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>
<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>
#media only screen and (max-width: 767px)
.productTopSection {
background-size: cover;
height: 200px;
min-height: auto;
}
since then there is no content i think the above is the way.correct me if i'm wrong
Your example does not work, well, it doesn't matter, I'll try to understand you
First he trumpets to understand how it works
The blue frame is your div in full screen mode (one element for the whole page)
since the div has no height, you give it a min-height or fixed height (height property) in your case it works the same with only a background and until you put something in the div
At this stage, you need to understand that the height you specify does not affect the height of the image itself, that is, the min-height will not change until you put a lot of text in it (this is just an example, you can put whatever you want that has a height)
In the image I have demonstrated the background-size property with 100% auto value.
from the documentation we see that we set 100% width and leave the height on auto also by default the bakcground-image has the same position (background-poistion: 0% 0%)
If you write it all like this:
background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
we will get the result as in the picture above, where the picture will be stretched in width relative to the screen
well now we reduce the width of screen (div automatically starts changing width and taking the width of the screen)
what do we see? there is an empty space below! In your case you set the height to 100% and the width automatically
background-size: auto 100%;
and yes, you shouldn't use multiple background image syntax in your case
background-size: auto 100%, cover; // you have one background image
This is what your non-working result looks like:
Note that I can see that you are using center positioning, so you have two holes! With what I congratulate you!
What should you do? You must use an image (html img tag) instead of a background
Example:
<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
img {
display: block; // Remove inline native space
width: 100%;
}
</style>
or use media to control the div's height (use vh instead of pixels or css media queries)
<style>
div {
/*.....*/
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 60vh;
}
/* OR */
div {
/*....*/
min-height: 875px;
}
#media screen and (max-width: 1024px) {
div {
min-height: 500px;
}
}
</style>
While it's not clear to me if you were planning to crop the image sides on mobile, I think this may help out at least - for something like this I think you can make it much easier by using an <img> tag in HTML instead of background-image in CSS.
The problem is getting the height to scale proportionally to the width so that the images retain their aspect ratio. What's happening in your code is the height is effectively being set to 895px with the min-height, it will not go higher unless you add enough content to the div.
So starting with mobile screens, your height is still 895px and the sides of the images will be cropped less and less until you reach 1920px in width (the image width). Once you go over this the image will start to stretch wider to cover and the top/bottom will start to be cropped. That top/bottom cropping while the images are centered is what causing the edges in the image to not line up. Because you're now lining up say 20% up on the top image to 20% down on the bottom one when you planned for 0% to line up.
So how does the <img> tag make this easier?
It adds content width/height to your container and allows the container to expand to fit the content, or force the content to shrink to fit in it. if you just throw an img in a div you'll see it expands the div out to the dimensions of the img.
But if you set the width to 100% on both the container and the img, it will fill the width of the container. The key being that the height will be proportionally set to maintain the aspect ratio and the div will expand in height to fit the img height needed and you will not have any top/bottom cropping so edges will line up.
Then you just need an absolute positioned container over the img to put your text content wherever you want.
If you were trying to crop the image sizes on small screens (which I think would look better). I'd suggest you use media queries there just to set some breakpoints where maybe the image is 120% width on phones and center - you'll still have that height though so if it's too high and you need to crop to bring the height down, I do have an idea for that but don't want to scope creep too much...
Here's an example with <img> - much less going on here and more straightforward IMO. And you gain more control - you can tweak this a lot to crop however you want at different media queries.
.productTopSection, .mc-key-points {
position: relative;
width: 100%;
}
.responsive-img {
width: 100%;
}
.overlay-content {
position: absolute;
/* just to get started with the content positioning */
top: 50%;
transform: translateY(-50%)
}
<div class="productTopSection g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
<div class="mc-key-points g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
I use such css for setting responsive background. When I see it on mobile, the background is zoomed in more and more if there is a lot of content appears on page. What is the proper way to avoid zooming of background? thanx
body {
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
A viewport meta tag like this might help (at the top of your html):
<meta name="viewport" content="width=device-width, initial-scale=1">
This will ensure that on a mobile screen, the content will not be displayed as on a large screen, and the width of the body element will only be as wide as the screen.
Its due to cover, cover will make sure the whole container gets covered with the image. You could try to use contain
You can try to define the body height as 100%, this should avoid vertical stretching of the background image:
body {
height: 100%;
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
And for that body height to work , you should also add this to your CSS:
html {
height: 100%;
}
With these setting, the bodys overflow is the default auto, which will cause a scroll bar to appear as soon as the contents exceed the 100% height.
I have an image that I want to cover the full window of my browser upon loading the website. I've got it so that, as the width of the browser window increases or decreases, the image is resized while preserving the center alignment and aspect ratio by cropping out on either side. However, I want it so that, as the height of the browser window increases or decreases, the image is cropped from the bottom so that the bottom of the image always lines up with the bottom of the browser window and the top of the image is never cut off. In other words, when I scroll down, there should be no more image beneath the browser window to scroll over. I have the following HTML and CSS code:
HTML:
<div class="hs-slide hs-slide-count<?php echo $i; ?>">
<div class="hs-slide-overlay"></div>
<img src="<?php echo esc_url($hashone_slider_image); ?>" class="banner">
<div class="hs-slide-caption">
<div class="hs-slide-cap-title animated fadeInLeft">
<?php echo esc_html($hashone_slider_title); ?>
</div>
<div class="hs-slide-cap-desc animated fadeInRight">
<?php echo esc_html($hashone_slider_subtitle); ?>
</div>
</div>
</div>
CSS:
img.banner{
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.banner {
left: 50%;
margin-left: -512px; /* 50% */
}
}
How can I do this, ideally without JavaScript? Also, I got the CSS from a guide on filling the browser window with an image, and I don't know why the min-width in the HTML is specifically set to 1024px.
Update:
Example: https://jsfiddle.net/jbx8nco4/4/
Description specific to your code: You need to remove the <img> inside the .hs-slide container and instead use a background-image. After adding the background-image to .hs-slide (see code below), the .hs-slide element needs a height to be visible. You can either explicitly set one or let the element adapt to the height of its content. For the latter you would need to remove all positioning from .hs-slide-caption and give it a padding-top and padding-bottom. For simplicity I've set an explicit height in the example:
.hs-slide {
height: 800px;
background-image: url(http://placekitten.com/1000/500); /* replace with your image */
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
The shorthand notation of this code would be:
background: url(//placekitten.com/1000/500) center top / cover no-repeat;
The background-attachment: fixed I mentioned in the first version of my comment is not needed as you want the image to scroll with your page.
By the way: as you have two background-images now, one being part of the .hs-slide-overlay, you could try getting rid of the overlay by combining the two background-images by using the notation for multiple background-images.
Old answer:
I am not completely sure but it sounds like what you want can be achieved by using a CSS background-image. I can't think of a Javascript-free solution using the HTML img tag.
You need to add the background-image to any element that stretches to the full width and height of the viewport and then set the appropriate attributes, most importantly background-size and background-position.
body {
width: 100%;
height: 100%;
background-image: url(//placekitten.com/1000/500);
background-repeat: no-repeat;
background-size: cover; // cover the whole area with the image
background-position: top; // expand image from the top
background-attachment: fixed;
}
The shorthand version for the background properties would be:
background-image: url(//placekitten.com/1000/500) no-repeat top fixed;
background-size: cover;
Here is a live example: https://jsfiddle.net/jbx8nco4/2/
Keep in mind, that background-size: cover is not supported by older browsers.
For further information and more techniques on using background-images for covering the full page see: https://css-tricks.com/perfect-full-page-background-image/
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.
I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.
I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?
Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.
I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.
Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so:
body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}
This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.
EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.
Hopefully soon you'll be able to use the new srcset attribute on the img element. If you want to use img elements now, the currently accepted answer is probably best.
However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the height to 0 and set the padding-bottom to a percentage of the element's own width, like so:
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.
Try this
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Simplified version
html {
background: url(image.jpg) center center / cover no-repeat fixed;
}
Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.
Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.
Edit: Changing the image on different size of the window
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>
In this way you change your image in different size of the browser.
You can use the CSS property background-size and set it to cover or contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).
Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.
body {
background-image: url(image.jpg); /* image */
background-position: center; /* center the image */
background-size: cover; /* cover the entire window */
}
Just use a two color background image:
<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>
Add the css:
html,body{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100%;
}
And html is:
<div class="bg-mg"></div>
CSS: stretching background image to 100% width and height of screen?
It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.
.your-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
html{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
I was also facing your problem. Two solutions come to my mind through HTML and CSS :
Solution 1) HTML img tag
.img-container {
width: 100%;
border: 1px solid #000;
}
.img-container img {
width: 100%;
pointer-events: none;
}
<div class="img-container">
<img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>
Solution 2) CSS background image
First find width and height of your image file, you can right click on your image and choose Properties then go to details tab. you can see your image dimensions (according to the picture).
enter image description here
Then remember them.
.img-container {
width: 100%;
// height: calc(100vw / (your image width / image height));
height: calc(100vw / (812 / 133));
background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
border: 1px solid #000;
}
<div class="img-container"></div>
I hope it was useful ;)
I have a sketch in pixels 1280 x 1024 and I want this sketch as background image of my html page and whatever else I show on the webpage will come on top of this image as div elements
I've seen this being done on many sites but when I put the image in the background it becomes so that I have o scroll the page horizontally.
Below is my css
body #background img {
left: 0;
min-width: 1024px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
}
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="background">
<img src="images/Sketch1.jpg">
</div>
</body>
Update
putting image in background with no-repeat cuts the image down.
I've put an example here: http://jsbin.com/ekaxum/2
body {
background: url(url_here) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
From the CSS 3 specification:
‘contain’: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Hi Mike and welcome to Stackoveflow.
Just add the height:100%; property to the image's CSS style. The problem is that it's height is more than your actual window size so the vertical scrollbar appears. It changes the available window width and that's why you see the horisontal scrollbar.