I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?
* { margin: 0;
padding: 0;
}
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;
}
My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.
You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.
You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.
Here's an example using your CSS settings (except see caveat below):
* {
margin: 0;
padding: 0;
}
html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO
Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.
body{
background: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If I have understood this properly, you want the image to be displayed properly on all the sizes you want?
Well in that case you can use #media query.
#media(max-width: your max width in px) {
/*And here change the height and width so that it doesn't look weird*/
}
I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
Thanks for any help. I'm fairly new to web developing and I've run into a strange issue on my site. http://bit.ly/1nnzqeB
The image that seems to be BEHIND it should be scaling to fit in the section, rather than what it's doing now. I've been stumped on this for hours and I feel that it's probably something stupid simple so I'm reaching out to the experts. Please help!
Well, im guessing you want this image to scale and fit the entire horizontal white space.
http://codesilver.us/wp-content/themes/SVG/img/slide1-1.jpg
After looking at your code, your .container needs to be 100% width
.container {
width: 100%;
}
After i applied this fix it appears to work, you may want to clean up your div structure a bit overall, but that's a different conversation.
UPDATE:
For re sizing you can use the css cover property for background-size: cover; this make sure the image covers the entire div and vertically and horizontally aligns the picture as well.
newheader {
/* background-size: 100px 100px; */
background: url("../img/slide1-1.jpg") no-repeat scroll center center;
margin-top: 5%;
/*background-size*/
-moz-background-size:cover;
background-size:cover;
}
Assuming this is actually how you want it to look, do two things:
Remove the background-size: 100px 100px; from the .newheader class
Add width: 100%; to the same class
I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
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 ;)