I'm currently sitting here trying to write a decent looking login page for my xfce setup.
I'm wanting the profile picture and background image to change when someone inputs the wrong password. I currently got it working to the point where it changes the background but it doesn't stretch it to fit my screen as I need the javascript to run background-size: cover;.
My current javascript line is currently document.body.style.background = " #000000 url('images/bg.gif') no-repeat center fixed"; JQuery is not an option, don't ask why. It just isn't.
Please and thank you.
You can use document.body.style.backgroundSize = "cover" to force the background to "fill the screen", as you say.
It's recommended (much easier and maintainable) to use CSS classes to style your page and to use JS to switch classes.
So, in your case, JavaScript can be something like:
document.body.className = 'wrong-password';
and CSS would be:
<style>
.wrong-password {
background: #000000 url('images/bg.gif') no-repeat center fixed;
background-size: cover;
}
</style>
And you can easily add more styles, or even change children's style (e.g. avatar) easily, like so:
<style>
.wrong-password .avatar {
display: none;
}
.wrong-password .some-placeholder {
display: block;
}
</style>
I have a background image for my html page. I set it through css style:-
html{
margin-top:10px;
background: url(xxxxx.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to know how I can change it dynamically it from the Javascript side.
I have tried something like:
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";
but that doesn't change the image.
Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).
The background image is not really tied to the html tag but the body tag.
Try:
body
{
background-image: url(xxxxx.jpg);
}
And the script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If this works as expected (you see zzzzz.jpg, not xxxxx.jpg) then you're ready to fix the rest of the CSS code.
EDIT: tested the code and fixed a bug. You must assign backgroundImage = "url('zzzzz.jpg')", not simply the filename as I've written before.
As an example, this works perfectly, all you need are two images (red.jpg and blue.jpg):
<html>
<head>
<style>
body
{
background-image: url('red.jpg');
}
</style>
</head>
<body>
<script>
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
</script>
</body>
</html>
EDIT 2:
The rest of the CSS must not change, so you'll still have:
body
{
margin-top: 10px;
background: url('xxxxx.jpg') no-repeat center center fixed;
background-size: cover;
}
The background property is a compound:
background: url('xxxxx.jpg') no-repeat center center fixed;
^ ^ ^ ^
URL R H V
URL: the image url
R: repetition
H: horizontal alignment
V: vertical alignment
With
background-image: url('xxxxx.jpg')
you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.
To access the html element you can use document.documentElement:
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
To change it every X seconds you can use setInterval() and have your images in an array.
I'm running this JavaScript and CSS (jsfiddle) on this website (animevid-other) so what I need is to adapt the JavaScript and CSS to the column_sx or have the background centered on the left (where there's the column), is this possible?
I've found something that could have helped but I think it's not exactly what I need (multiple-backgrounds-left-half-and-right-half). So since I have not so much knowledge of JavaScript and just a few things about CSS, could you help me?
Edit : more details here http://i.imgur.com/DsF4q3M.png
You should set the background to colonna_sx instead of body. So add this to colonna_sx.
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Then you should change the script. If you add jQuery you can change this.
document.body.background ='http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
to this.
var backgroundpic = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
$('.colonna_sx').css("background", "url(backgroundpic)");
Without jQuery.
document.querySelector('div.colonna_sx').style.backgroundImage = 'url(http://adventureofucm.com/OtherSites/image_background/' + num + '.jpg)';
This should work in most browsers (IE8 and up) http://caniuse.com/#feat=queryselector.
I am trying to add a panning effect to background image in a page, the image is quite large 1800 x 1067 ,so basically will be larger than the window
I want to pan the background in all directions when the mouse reaches the end of the window only ,
I found a Javascript code that does the panning, but only horizontally , tried playing around with it to enable vertical panning. didnt work.
here is the code on JSFiddle: http://jsfiddle.net/v662t/
// HTML
<div id="pageBg">
</div>
//CSS
#pageBg {
background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
background-size: cover;
height: auto;
left: 0;
min-height: 768px;
min-width: 1024px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
// Javascript
$(document).ready(function(){
$('#pageBg').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*100;
$('#pageBg').css('background-position-x', mousePosX +'%');
});
});
remove background-size: cover and add a few javascript lines for mousePosY:
var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
check out the working fiddle here: http://jsfiddle.net/georgedyer/XWnUA/2/
I'm answering the comment about panning at the edges here to include better formatting.
It depends on how exactly you want panning at the edges to work. Will the image move only if the mouse is moving over the edge, or even when the mouse is motionless but hovering over the edge?
In the first case: you can use the same fiddle code and just check to see if mousePosX or mousePosY are < 10 or > 90 (or whatever percentages you want to define as edges). If so, then instead of moving the image to a percentage of the window you'd move it to a percentage of the edge.
Since that may end up a little too sensitive, so you could go with the alternative of just moving on hover, in which case you'd use mouseEnter and mouseLeave events instead, and just start an interval on mouseEnter (using var interval = setInterval(moveImage,250);) that moves the background image a pixel, then clear that interval (clearInterval(interval);) on mouseLeave.
I'll leave it to you to edit the fiddle yourself and see if you can get it working how you want.
Here's a link to what I'll be referring to.
I'm having some trouble getting the background image to work the way I'd like it to.
I want the background to auto resize based on the width of the window, which it is already doing correctly. If you make your window smaller you'll see the background shrink with it.
Here's the issue. If you make your window wide (short) then the background will resize and go too high so you can't see the top of the background anymore (since the background is bottom positioned).
I want the background to be top position when you are at the top of the page, and as you scroll down it will slowly move to be bottom positioned. Sort of like the effect of an Android phone's background when you move left and right. Of course, keep in mind that I still want the background to auto-resize when you make the window smaller.
html {
background-color: #70d4e3;
height: 100%;
}
body {
height: 100%;
}
.background {
margin-top: 45px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
}
.banner {
margin: 0px auto;
width: 991px;
margin-bottom: -9px;
}
.content {
background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
height: 889px;
margin: 0 auto;
width: 869px;
}
.innerContent {
padding: 30px;
}
<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />
<div class="banner">
<img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
<div class="innerContent">
testing
</div>
</div>
Maybe some javascript or jquery would be needed to achieve this.
Well, this was fun, thanks!
I hope you don't mind me taking the liberty to use percentages to make my life a little bit easier and possibly the script slightly more robust since I can reliably use floats with percentages.
What I did is make the layout, html and css comply with the rules you need for the bg to be animated properly, they stayed largely the same from what you had.
Then it was just a question of figuring out the calculations needed with the right properties to figure out the percentage you were from the top, the *20 is actually the amount of space 'left' to fill by the background image in percentages (as the background height is 80%).
They I moved the calculations to a function so I could call that on scroll and on window resize, making sure it's initiated on any event that modifies the window somehow...
Didn't do extensive testing but it worked in Chrome and I'm tired :p
I believe this is what you are looking for:
http://jsfiddle.net/sg3s/RSqrw/15/ See edit 2
If you wanted this the other way arround just make the page background start at the top and modify that:
http://jsfiddle.net/sg3s/RSqrw/14/ See edit 2
Edit:
As a bonus, and since I had never actually written jquery script as a 'plugin', I decided to convert this into one. What I came up with should be easy to implement and use!
http://jsfiddle.net/sg3s/RSqrw/52/ See Edit 3
Functionality successfully tested in Chrome, Firefox 3.6, IE9 + compatibility mode
Edit 2:
Reading the question again checking if I did it right I noticed I didn't quite do what you want, so I updated the link in the first edit which gives you a plugin in which you can have several options for the scrolling background. It retains my 'old' interpetation while also doing what you want... Read comments in code for some extra descriptions.
Edit 3:
As I went to work today I was bothered with the fact that my plugin 'try' was a little bloated. And as you mentioned in the comment it didn't quite fit the requirements.
So I rewrote it to only do what you want and not much more, tested in Chrome Firefox, IE9 +compat etc etc.. This script is a lot cleaner.
http://jsfiddle.net/sg3s/vZxHW/
You can chose to make the background stick to the top or bottom if the height fits in the window. Nothing else, but that is already more than enough to do some pretty cool stuff :p
An exact solution: Fiddle: http://jsfiddle.net/srGHE/2/show/
View source
Thanks for the challenge. See below for the solution, which is complying with all requirements, including recommended yet optional (with steps on how to remove these) features. I only show the changed parts of your page, with an explanation after each section (CSS, HTML and JavaScript):
CSS (changes):
html,body{
margin: 0;
height: 100%;
padding: 0;
}
body{
background-color: #70d4e3;
}
#background { /*Previously: .background*/
/*Removed: margin-top: 45px;
No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */
Explanation of CSS revisions:
margin-top:45px at the background is unnecessary, since you're absolutely positioning the element.
All of the elements which are unlikely to appear more than once should be selected via the id (#) selector. This selector is more specific than the class selector.
HTML (changes):
All of the class attributes have been replaced by id. No other changes have been made. Don't forget to include the JQuery framework, because I've implemented your wishes using JQuery.
JavaScript (new):
Note: I have added a feature which you didn't request, but seems logical. The code will automatically reserve sufficient margin at the left side of the window in order to always display the background. Remove anything between the marked comments if you don't want this feature.
$(document).ready(function(){
//"Static" variables
var background = $("#background");
var marginTop = parseFloat(background.css("margin-top")) || 0;
var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/
function fixBG(){
var bodyWidth = $("body").width();
var body_bg_width_ratio = bodyWidth/1920;
var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG
var height = $(document).height();
var docHeight = $(window).height();
var difHeight = bgHeight - docHeight;
var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;
/*Start of automatic left-margin*/
var arrowWidth = body_bg_width_ratio * 115; //Arrow width
if(bodyWidth - bannerWidth > arrowWidth*2){
$("body > div").css("margin-left", "auto");
} else {
$("body > #banner").css("margin-left", arrowWidth+"px");
$("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
}
/*End of automatic left-margin*/
if(difHeight > 0){
background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
} else {
background.css({top:"", bottom:"0"});
}
}
$(window).resize(fixBG);
$(window).scroll(fixBG);
fixBG();
});
Explanation of the JavaScript code
The size of the background is determined by calculating the ratio of the background and document width. The width property is used, because it's the most reliable method for the calculation.
Then, the height of the viewport, document body and background is calculated. If applicable, the scrolling offset is also calculated, to prepare the movement of the background, if necessary.
Optionally, the code determines whether it's necessary to adjust the left margin (to keep the background visible at a narrow window).
Finally, if the background arrow has a greater height than the document's body, the background is moved accordingly, taking the scrolling position into account. The arrow starts at the top of the document, and will move up as the user scrolls (so that the bottom side of the arrow will be the bottom of the page when the user has fully scrolled down). If it's unnecessary to move the background, because it already suits well, the background will be positioned at the bottom of the page.
When the page has finished loading, this functionality is added to the Resize and scroll events, so that the background is always at the right location.
If you've got any other questions, feel free to ask them.
well, I'm not sure if I understand you and why do you want to do that, but you can try adding 2 backgrounds (see http://www.css3.info/preview/multiple-backgrounds/ ), one with the top bg and another with the bottom bg but I think that if the page is not too long it will cause issues, so the other answer with pure CSS is as follows: first add 3 horizontal divs with 100% width. Top div will have your top bg and its height, middle div will be transparent and auto height and bottom div will have your bottom bg and its height. All divs will have a 0 z-index. Then create a higher z-index div to act as a container and you'll be set. If I understand your question right, that's the close I can think of to achieve that. This being said, I'm pretty sure you can do this with JQuery with way better results
Using jQuery I was able to give you what I think you're asking for:
$(window).scroll(function() {
var h = Math.max($(document).height(), $(window).height());
var bottom = h - $(".background").height() - $(window).height();
$(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px");
});
EDIT: Forgot to account for the way scrollTop reports position.
Or maybe:
.background {
margin-top: 45px;
max-width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
max-height: 100%;
}
I reccomend using jQuery Background Parallax
http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/
The function is as simple as
$("body").backgroundparallax();
Ask if you don't get it to work.
#abney; as i understand your question may that's you want http://jsfiddle.net/sandeep/RSqrw/60/
you need only css for this:
#background {
position: fixed;
width: 100%;
height:100%;
top: 0;
left:0;
z-index: -1;
}
The solution to your issue is a nice little lightweight plugin by Scott Robin. You can get more info, download it, and make your life easier for all of your projects by visiting his project page here.