i have portrait image (width: 869px; height: 2853px) which i wanna use as the background image for my website. the image should be responsive and always fill the entire width of the browser window. the image should keep its proportions and should never be cropped. therefor the height needs to adjust to the given width. since the image height is always bigger than the viewport height, you should be able to scroll to the bottom of the image, which should be the bottom of the website as well.
i'd really appreciate if someone would tell me how to do this.
I think the other commenters are ignoring your request for help in not "cropping" the image, when they keep suggesting use of background-size: cover.
Here's what I've gathered are your requirements:
An image to be a background, behind the content of your site.
The background image has a specific aspect ratio and should not be cropped
If the browser window doesn't match the images aspect ratio, it should allow scrolling vertically, but should always fit to the windows width.
A css only solution...
body {
position: relative;
margin: 0;
}
body::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 0;
/* height / width = ratio% */
/* 2853px / 869px = 328.3084% */
padding-bottom: 328.3084%;
padding-bottom: calc(2853 / 869 * 100%);
background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}
Replace the url with the url of your image, and if the image pixel dimensions change, update those in the way I have commented out how padding-bottom should be calculated.
This creates a separate background element inside the body of the website and still allows you to have whatever content you want inside your site. But keep in mind, if you're on a very small screen, say 320px/480px, and the websites content becomes very tall because of the narrow width of the screen, this background image could be scrolled passed to account for the content. That won't break this code, but I would just suggest adding a background color or texture to your html element, which would show below the image in this case. Good luck.
Related
I have a gallery (responsiveslides.js) that is launched within a jquery mobile popup that overlays the window. The desired look is to have the gallery scale based on the browser window.
Here is a stripped down working example of my setup and issue: https://jsfiddle.net/02ds2trp/
What I'm trying to accomplish is to have the popup div height match the scaled image. The blue background is ok on the sides of the image but I don't want it on the bottom/top. ie. the orange border should be tight to the image. Also the popup div shouldn't grow more then 70% of the screen.
Right now I have .popupGalleryBannerDIV with height:70% but that is growing it too big, removing that makes the image gallery have no height.
.popupGalleryBannerDIV {
position: fixed;
width: 100%;
background: #2795EE;
top: 15%;
left: 0px;
height: 70%; /* how to I make this dynamic? */
max-height: 70%;
}
Note: I've been playing with this for a week so some css markup on fiddle might be from failed attempts.
I'm having trouble figuring out how to make this work any help would be appreciated.
Edit:
Add some picture to help understand what I'm trying to do.
View post on imgur.com
Part of the problem, is that your slide is using a background image which has no default height/width on it's own. It's the content that dictates how much space should be filled up.
My suggestion is to use an tag instead or have some js function that will appropriately size the viewport height to match the image's ratio based on the viewport width.
This is how I ended up coding the size change:
function gallerySize() {
//set height of content to 70%
$('.popupGalleryBannerDIV').css("height", "70%");
//check img size compaired to it, of large set image height to height of content
var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
//else if height is smaller set conect to height of img
if (imgHeight < $('.popupGalleryBannerDIV').height()){
$('.popupGalleryBannerDIV').css("height", imgHeight);
}
}
Using a responsive fluid grid and images are 800px x 500px
Problem: When images load, the footer as it the top and is pushed down while the images are loading in.
Setup: Using a div for the images and div for the footer.
Goal: To have the footer always remain in the correct position, not trying to put it in an absolute spot, just looking to have the images spacing accounted for.
Ideas: Perhaps use a transparent png at 800x500 so it loads first before the images.
Concerns: Creating a div placeholder at 800x500 might not work as these images are responsive in a fluid grid so they'll never actually be at that size unless the viewer has a huge monitor..
Final result when images loaded:
Current issue:
Goal for images to load:
When I know the aspect ratio for something is going to stay the same no matter what the width of the elements/screen is, I do something like this:
.image-holder {
display: inline-block;
width: 33.333%;
position: relative;
}
.image-holder:before {
content:"";
display: block;
padding-top: 62.5%;
}
.image-holder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here's a full demo: http://jsfiddle.net/serv0m8o/1/
I wrap each image in a div with a class of image-holder (which is styled to give you the 3 per row pattern that you illustrated) and make sure it is position: relative;
I then style the :before pseudo-element of that div to be the proper height of the aspect ratio that is needed. Padding in CSS is an intrinsic property, which means it is based on the width of the element, allowing you to assign a percentage which reflects the ratio. You specified 800x500 images, so (500/800*100) = 62.5% as my padding-top
Then, you can absolutely position your image to fill the full width and height of the container (which is why we set it to be position: relative;)
Doing this means that the div element is the size that the image will be, whether the image is loaded into it or not (the image itself has no bearing on the container size, since it is absolutely positioned)
I have a page and I want to eliminate the scenario where it scrolls left to right. No matter what resolution I view it on, it leaves about 70px of white-space on the right. On the page http://bitfilmfund.com/ I have set
for the city image background part, I have already set the body to be:
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
I also did a media query where I defined the CSS to resize the image based on a max-width of the viewport, such as:
#media (max-width: 1600px) {
#baner {width: 100%;
}
}
to get the city scape image to stretch the screen, and tried smaller sizes too for smaller res's, but it just does not work.
There is consistently a patch of white space at the right. Even if I set the CSS width's to be as high (high number for width, that is) as they can be until the screen is filled, I still have the left-right scroll. I want the images and background to resize to fill the screen and create no need for left-right scroll. Why don't this CSS works?
Quick Fix:
The first <div> with class='row' is causing the page to scroll horizontally; more specifically:
margin-left: -15px;
margin-right: -15px;
will cause this unwanted whitespace and horizontal scrollbar.
Additionally, the margin on the <body> should be set as:
margin: 0px;
in order to avoid some browsers (Chrome, for example) applying the 'default' margin that they like to apply.
Longer (surplus) fix:
Whilst the container elements on the page are re-sizing dynamically, a fair amount of the content is not. (Including the banner image as mentioned and the iframe containing the video.) The user's viewport size should be taken into consideration, in that when viewed from a smaller ~<1675px width the top navigation bar refuses to resize down and instead creates the horizontal scrolling issue. These problems can be fixed by using percentages rather than px, as I am sure you are well aware, (considering the usage of percentages on container elements).
Obviously, the screen size cannot resize down indefinitely - a limit has to be drawn somewhere. According to W3Schools, most browsers are now above the 1024x768px as a minimum, even Google doesn't resize down to this level however. It's up to you to choose where the minimum size lies for your website; but the more all-encompassing, the better.
Banner image:
This should be a fairly straightforward part, the following CSS properties should be of use to you, when added with the CSS that defines the image to be displayed:
background-size: 100%;
background: //your-image-location// no-repeat;
This will however, become stretched or compressed depending on the browser size, but is a good starting point for resolving the issue.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size