Can't get image to fit background of body element - javascript

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>

Related

Full page size background image

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.

Half page background / Column background

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.

how to center a random background in a javascript

I've looked on stackoverflow for a background js. After trying some I found what I thought was exactly what I need:
<script type="text/javascript">
ChangeIt();
</script>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
document.body.style.repeat = "contain";// Background repeat
}
</script>
However, the backgrounds don't center, you just see 'em on the top left corner. So I googled on the net but... well idk anything about js, just a little few things. I'm helping a friend with his website and we're stuck on this. I'm just hoping someone with more knowledge than us can help by giving a look.
EDIT : Here's what i mean by "center" : http://i.imgur.com/G3Z9epT.png
Here's a fiddle that uses css instead of js for this, also I've added a background-size on body so the entire image is visible on all screen sizes, this is optional however - http://jsfiddle.net/dk329q1L/
Here's the css -
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Entire background image always stays in view */
}
you could achive this by doing this also:
background-position: center;
To center the background add:
document.body.style.backgroundPosition = "center";
you have to set margin auto in this case ,but you have to specify width
you have to assign id :
{
width:100px;
} margin: auto;
You should set the background-position for your element, add this line to your code:
document.body.style.backgroundPosition = "center top";
The value center top means that the image will be placed center in horizontal, and will be placed at top in vertical.
jsFiddle Demo.
The below image shows other values you can use for background-position:

Change CSS properties using Javascript/jquery

I'm trying to adjust my CSS dynamically. Here's my CSS:
.red_button {
background:url(record.png);
padding: 19px 251px;
cursor: pointer;
background-repeat: no-repeat;
}
.red_button:hover {
background:url(record-hover.png);
cursor: pointer;
background-repeat: no-repeat;
}
Which after it is clicked gets changed to something like this:
function recordStarted() {
started = true;
$("#red_button").css("background","url(stop.png)");
$("#red_button").css("background-repeat","no-repeat");
}
But if I try to change the :hover attribute with something like $("#red_button:hover").css("background","url(stop.png)"); it just changes the background (not the hover background). So what is the best way to go about this? I have tried a few different things like with jQuery, but have not been able to get anything to work.
Please don't do this, use a CSS class unless absolutely required. This will separate all your styling into CSS where it belongs and clean up your JS at the same time.
CSS
#red_button.clicked {
/* Applied when the button is clicked and NOT hovered */
}
#red_button.clicked:hover {
/* Applied when the button is clicked and hovered */
background: url(stop.png);
background-repeat: no-repeat;
}
JS
function recordStarted() {
started = true;
$("#red_button").addClass("clicked");
}
I also notice that you are referring to the .red_button class in CSS but the #red_button ID in JS, you probably mean for them both to be IDs?
EDIT: Change the rule to apply when clicked and hovered.
Here is a simple example of the styles in action: http://jsfiddle.net/BMmsD/
try this :
$("#red_button").mouseover(function() {
this.css("background","url(stop.png)");
});
You doing some typo error I guess as you are using "." in css and "#" in jquery.
else use updated code
$(document).ready(function() {
$(".red_button").click(function() {
$(".red_button").css("background","record-hover.png");
});
});
I hope I am clear enough ?
This question/answer ended up answering my question pretty adequately.
I need a little clarification on dynamically setting a hover BG

Random Header image on Page Refresh, CSS jquery javascript?

I need help finding code for my web page. I have a "customize.css" page which has code for loading the header image. But the header loads on a "header.asp", which is then loaded on the index page "default.asp". I guess my question is what can I use to generate, one of four of the header images I have created, randomly on each page reload/refresh for a header?
This code is from my "customize.css" file. After I get the code, what do I put in the "background-image:" for it to load to the page?
#header {
color: #FFF;
height: 350px;
background-color: transparent;
background-image: WHAT DO I PUT IN HERE?;
background-position: left top;
background-repeat: no-repeat;
}
I have searched the net forum after forum for the past week in search of an answer but have yet to get one. Anyone have any ideas? Thanks
I'd go simple. Define 4 different classes, each with a different background image. In your header ASP script, select one of the 4 classes at random, and output that class into your code. It's simple, the images will cache as they are displayed, and because you avoid JavaScript, it works for 100% of browsers/users. For a small project, it's easy to maintain.
Now, if you get into 100 different background images, you would want to do something different.
If it were me, I would create a separate web service to serve a random image. I would use PHP, but I assume you can do it in ASP).
#header {
background-image: url(/yourWebService.asp);
}
Have the service select one of the images at random, and return it accordingly.
The only way of doing that in the css is by calling a URL that returns the random image. Something like:
#header { color: #FFF; height: 350px; background-color: transparent; background-image: "/loadimage"; background-position: left top; background-repeat: no-repeat; }
But then you must code a service at /loadimage that returns the image.
It will be much more easy change the image at the page load via javascript. Assuming you have the images img0.jpg, img1.jpg, img2.jpg and img3.jpg at the images directory, you could do:
You can do:
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />
See the random image header of this page
I am using a specify class for change the background-position css property.

Categories

Resources