let's say my body-tag has a background-image with the resolution of 1920 x 1020. When I load my page, my window only has the size of ~800 x 800. I don't want to load the 1920 x 1020 resolution, only the 800 x 800 I'll need to display the backgroundimage.
Any way to achieve this?
http://jsfiddle.net/49qvq7rw/
<div class="give_me_background_plx">
</div>
body,
html {
height:100%;
width:100%;
}
.give_me_background_plx {
background: url("http://placehold.it/1920x1000") center center, 100% 100%;
height:100%;
width:100%;
}
Edit:
See the jsfiddle. When I open that page, I don't want to load the full image to be loaded, rather a smaller version that is exactly the window size. Just like in a img-tag i want to set a height/width for that image, and those should be my window size.
So you want to load a different image regarding the viewport? Use CSS media queries for that:
body {
background: url(image-1920.png);
}
#media(max-width:800px){
body {
background: url(image-800.png);
}
}
Unfortunately, this is something you can only accomplish by Javascript (I personally prefer jQuery).
Because you only want to load one image and not load in another image whenever the window gets bigger (as Roy's answer accomplishes).
The jQuery would be something similar to:
$(document).ready(function() {
if ($(window).width() <= 800) { // if the width is equal to, or smaller than 800 px.
$("body").css("background","url(image-800.jpg) no-repeat"); // load the small image
} else { // if the width is bigger than 800 px
$("body").css("background","url(image-1920.jpg) no-repeat"); // load the bigger image.
}
});
JSFiddle demo with your gravatar
Note: To test the demo, your must load the page with a small width, then reload it with a width bigger than 800px.
The css of the body tag mus be 100% (width: 100%) or else you can use background-size property to set the size of your image in the background.
Related
So, I have an art website, with each work getting its own page. The works are mostly photos, meaning they have higher resolutions than most screens are capable of displaying - so they need to be resized down to scale, obviously.
To make works easier to look through, I display them such that they take up most of the screen (minus 100px in either dimension), scaling to fill whichever dimension is more limiting:
Work X is square-shaped, and on the average monitor it gets resized so that its height fills the entire vertical space, and its width scales accordingly - preserving the aspect ratio
Work Y is tapestry-shaped, and gets resized so that its width fills the entire horizontal space, and its vertical space gets resized to match that aspect ratio.
I'm currently using a straightforward Javascript script for this, calling a function on the img tag's onload (as well as whenever the window is resized) to calculate the desired width/height of the image and apply that. The problem with using Javascript for this is that there's a delay between when the image begins to load and when it resizes, which makes the page look really ugly for a while, especially when viewing the site on a poor internet connection.
Leading to my question: is there a way to resize images to a certain percentage of screen size, while preserving aspect ratio, in pure CSS?
This answer provides another Javascript solution, but I'd prefer to find a way to do this in pure CSS if possible.
My current script is this:
function setGoodHeight (element) {
if( on mobile ) {
...
}
else {
height_buffer = 100
width_buffer = 100
height_diff_pct = element.naturalHeight / window.innerHeight
width_diff_pct = element.naturalWidth / window.innerWidth
if(height_diff_pct > width_diff_pct) {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.height = window.innerHeight - height_buffer;
element.width = w * element.height / h;
}
else {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.width = window.innerWidth - width_buffer;
element.height = h * element.width / w;
}
if(element.width < 540) {
element.parentNode.setAttribute("style","width:" + 540 + "px");
}
else {
element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
}
}
}
Using the vw and vh units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width and max-height for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}
Tell your images to be at most 100% width of the container they are in, and height set to auto will maintain aspect ratio.
.my-image-class {
max-width: 100%;
height: auto;
}
How about using background-size: cover; for this?
Every image can be the background of a div, which in turn has the following properties set.
height
width
background-size: cover;
background: url('img.png') center center no-repeat;
JavaScript is the best answer but if you really want to only use css you can use percentages rather then px these will scale to a given container.
.img {
max-width:100%;
max-height:100%;
}
here is a similar question and answer: StackPost
In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
This is my container:
.test {
height: 100vh;
}
update: This actually works without problem in firefox.
Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:
However, when I resize the browser window vertically, the .test div is not updated - see image below.
To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy
Should I resize the window horizontally however, the height resets to the correct viewport height.
one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.
And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.
causeRepaintsOn = $("#yourTagIdWithFontInVM");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
This is the link where I found the above solution. Link
This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:
html, body {
margin:0;
padding:0
}
I have a strange problem, my data gets hidden when I change the height of my browser.
It also disappears in mobile browsers sizes... here is a screenshot:
I am following this tutorial
Here is the page with the issue.
From what I can tell your slide DIVs have height: 100%; as well as your html and body tags. html will inherit it's height from the view-port size. Your content is larger than the view-port as you change the vertical height. Content gets hidden under the elements that come after it. If you remove the background color from all your slides you will begin to see your content overlapping.
What you need to do is remove height: 100%; from your slides. This will cause your slider DIVs to contain/show your content as they will expand to fit the height they actually take up and will prevent element stacking.
What you need is to either have the slide be the view-port size or the content size, which ever is larger. Since you are using jQuery already you could try something like this:
http://jsfiddle.net/z6xrf/
function slideHeights() {
var viewportHeight = $(window).height();
$('.slide').each(function(){
var elem = $(this);
// reset so we can get the correct height of element each time
elem.css('height','auto');
var slideHeight = elem.height(); // height of content in slide
if ( viewportHeight > slideHeight ) {
height = viewportHeight;
} else {
height = slideHeight;
}
elem.css('height', height);
});
}
$(document).ready(function(){
slideHeights(); // for page load
$(window).resize(slideHeights); // for window resize
});
What we did above is create a function that monitors the current size of the view-port and compares it to the height of the slide (total height of slide's content). If the view-port height is larger than content height we use that, otherwise we use the content height for the slide. In the process we reset the min-height value so it is not reading a value we previously set.
We initially fire the function on page load simply by calling it. Then we pass it to the resize function so it gets called when appropriate. See http://api.jquery.com/resize/ for how browser apply the resize event.
It is a problem of height of-course.
Do one thing, set a minimum height of each slide, approx 800 or 900 px. And then test, it will surely work.
.slide {
background-attachment: fixed;
height: 100%;
min-height: 800px; /*set any height here*/
position: relative;
width: 100%;
}
I'm getting a problem in html and css,
I used a bg image for my popup window whose size is 500px width and 400px height;
having a scrollable text in it. but problem is that if i reduce a size of browser it get distorted. Please help me if i can make it scalable background and according to that text as per browser size.
Thanks
Mayur Mate
You cannot scale a background if you defined it as part of your CSS without using some JS. In the example below, the black part of the background would scale/resize with the browser window but the image would not; the img would just happily sit # top:0, left:0, render 1:1 and laugh at you.
/* Black will scale, images does not */
#someDiv {
display:block;
width:100%;
height:100%;
background:#000 url(someImage.jpg) 0 0 no-repeat;
}
If you need to have your background image in your CSS for whatever reason, then read this http://css-tricks.com/perfect-full-page-background-image/ for how to manage scaling CSS backgrounds w/ JS
or
If you defined your background as an img then you have a better chance and you don't even need to use JS (although you probably should if you want to maintain ratio/scale).