height and width of background picture adapt to each screen size
Question
I've been working for some time on my first website. I have the CSS working but I still need to fix some simple, but no so simply issues. In the index.html file I have a background picture attached to the html. So I have a fullscreen background picture attached via CSS to the html tag. This is the CSS code:
html{ background: no-repeat center center fixed;
-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover; -ms-background-size: cover;
background-size: cover; }
But I'm loading the pictures via Javascript. My objective is to have an array of pictures and each time a user loads the website or triggers it a random picture will be displayed. So I have this code in Javascript which is working:
$(document).ready(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("html").css({
background: "url(_img/bg/index_rnd/" + randomImages[rndNum] + ".jpg)
no-repeat"
});
});
All these codes are working. The pictures are selected from an array and displayed randomly once they are loaded. But I have a great problem which I cannot find a clear answer and I'm stuck. I would like that the width and the height are rezised , so the whole picture is displayed in the screen. Of course each screen is different... I read something about innerhieght and innerwidth properties, but I do not know how to proceed. What should I do so the pictures resize to each different screen?
In this moment the pictures are with a resolution of 1024x683. I have a computer with a screen of 15"" and a resolution of 1440x900. My pictures get always a bit more pixelated and to long in height to display, so a part of the picture is cut.
Questions:
What should I do so the pictures resize to each different screen resolution?
A recommended picture resolution so the picture is displayed correctly?
Is there a way to display the picture into the exact size of a screen? Even if its original format gets a bit modified?
REPLY AFTER RECIEVING ANSWER ------------------------------------------------------------- NEW QUESTION -----------------------------------------------------------------------------
Hello, at last I had time to use the code... It does work properly. I only needed to add the url to my image folder and magic!!! So my code is actually like this:
$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({'height':'100%','width':'auto'});
} else {
$img.css({'width':'100%','height':'auto'});
}
}
$win.resize(function() { resize(); }).trigger('resize');
});
Regarding my html I have for now an image with id background. I want to center the image as told. So my question is if I should put this image in a div. If so, how can I make this image center itself in the center of the screen???
Another question, before I had my image attachted to the html and now to an image. Therefore the image is influencing other elements I have in my body. How can I make that this image be displayed behind all the other elements of my body?!?! For example my logo and header_bg are transformed when my img id="background" is loaded.
Can you help???
This is my html for any doubts...
<body>
<img id="background" src="" alt="" />
<div id="header_img">
<nav>
<div id="header-bg-left">
<div id="nav-content">
<div id="logo">
<a href="index.html"><img alt="./_img/nav/logo.rosa.png" src="">logo</a>
</div>
<div id="categories">
<ul>
<li id="nav-quien"><a href="#">quien es</a>
<ul>
<li id="nav-biografia" class="drop1"><a href="biografia.html">biografia</a></li>
<li id="nav-curriculum" class="drop2"><a href="curriculum.html">curriculum</a></li>
</ul>
</li>
<li id="nav-galeria" class="marginli"><a href="gallery.html">galeria</a>
<ul>
<li id="nav-gal-nat" class="drop3"><a href="gallery.html">paisaje natural</a></li>
<li id="nav-gal-urb" class="drop4"><a href="gallery.html">paisaje urbano</a></li>
</ul>
</li>
<li id="nav-prensa" class="marginli"><a href="prensa.html">prensa</a></li>
<li id="nav-links" class="marginli"><a href="links.html">links</a></li>
<li id="nav-contacto" class="marginli"><a href="contacto.html">contacto</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<footer>
<div id="footer-bg-left">
<div id="foot-content">
<p>Diseñado por <a href="mailto:daniramirezescudero@gmail.com">Daniel. R-Escudero</a> <span>|</span> Todos los derechos reservados <span>|</span> <a href="mailto:info@scalesplanet.com">info@rosasusaeta.com</a> <span>|</span><a href="http://www.linkedin.com/"><img src="./_img/footer/logo.linked.png"></a> <a href="http://www.facebook.com/"><img src="./_img/footer/logo.facebook.png"></a></p>
</div>
</div>
</footer>
</body>
1 answers
solution1
3 ACCPTED 2012-04-29 15:35:48
UPDATED 29 Nov 2012
$(window).resize(function() {
resize();
});
$(function() {
$('#background').attr('src', 'http://cdn.com/bg.png').css({
'position' : 'fixed',
'top' : 0,
'left' : 0
});
resize();
});
function resize() {
var $img = $('#background');
if (($(window).width() / $(window).height()) < ($img.width() / $img.height())) {
$img.css({
'height' : '100%',
'width' : 'auto'
});
} else {
$img.css({
'width' : 'auto',
'height' : $(window).height() + 'px'
});
}
}
<body>
<img id="background" src="" alt=""/>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.