My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?
Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.
Use an image tag as the background give it a 100% for width and height, and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.
<img src="yourimage" width="100%" height="100%" style="z-index:0"/>
Live Demo
In CSS3, we have a new property called background-size:
body {
background-size: 100%;
}
looking for this?
<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>
You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.
$(function(){
$(window).resize(function(){
var windowW = $(window).width();
var windowH = $(window).height();
//Using above variables you can deside the size of the background image to be set
}).resize();//Trigger the resize event on page load.
});
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
Is there a way to prevent the redrawing of the screen while resizing a responsive website?
I want to have a responsive website, but I don't like the cheap animations that are involved when resizing the screen (media breaks, instant disappears, text wraps (really ugly))
I hope there is a way to tell the browser to redraw the screen only when resizing has stopped or some similar solution..
Is there?
No. When you change the size of any DOM element, including the body, all browsers "reflow" (i.e. redraw) the page. Even when you include an img element without an explicit size, the page will reflow when an image is loaded.
You may read more details here:
When does reflow happen in a DOM environment?
if you want to prevent redrawing set a timer something like that might help
var timeoutHandler;
var startet=false
resize=function(){
clearTimeout(timeoutHandler);
if(!startet){
startet=true;
//get body pixel width
//get body pixel height;
//save css width value
//save css height value
//set body width= width pixel value;
//set body height= height pixel value;
}
timeoutHandler=setTimeout(function(){
//restore css values
startet=false;
},100);
}
I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance
You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/
I would like to write a jQuery plugin to animate a background-size property from cover to 100% and vice versa but I don't know how to get the cover to percent values, is it possible to get the resized width and height of a sized background image?
I know I can get $('#selector').css('backgroundSize') but I get cover and I would like to convert it in the current width and height of the background image, how can I do that?
If you can get the dimensions of the image then you can check them against the dimensions of the container in which the image is the background-image. You can use these two pieces of information to turn cover into a percentage.
To get the dimensions of the image, create an img element to test:
$('<img />').bind('load', function () {
//the image has loaded, you can now get it's height/width
}).addClass('offScreen').attr('src', '...');
The offScreen class is used to move the element off the screen while it loads so the user can't see it happening:
.offScreen {
position : absolute;
left : -9999px;
}
I am using full browser width height jquery blockUI to display selected image from gallery. On the image bellow is scheme of view in blockUI.
Basically view in side blockUI has width and height set to 100%.
Inside there are two more divs. Right has width set to 80% of the view and it contain image.
Image has width and height set to 100% (but this is wrong I know).
Images that I display here are images in original sizes uploaded by users. But if monitor is 1024x768 and uploaded image is 600x1900 I don't what to that image goes out of the screen.
So how can I fix this to display that image centered and proportional?
Use max-width and max-height, you will need to use JavaScript in IE 6 if you need to support it:
#blockUI img {
max-width: 100%;
max-height: 100%;
}
This keeps the img element's aspect ratio when resizing, up to the maximum possible width and heights.