How to change background

Question

I would like to create a site similar to http://www.tomford.com/ but in HTML.

the problem is how do I create a background where images

change automatically background
user clicks a icon to change background
done in css or java script

What I have done:

<body style="background: url(url of image) repeat-x repeat-y center"></body>

Have a look here: http://plugins.jquery.com/tag/slideshow/ . no need to reinvent the wheel — Ivan Chernykh, Jul 23 '13 at 08:13
possible duplicate of [How to change HTML background with JavaScript Function?](http://stackoverflow.com/questions/2618699/how-to-change-html-background-with-javascript-function) — naththedeveloper, Jul 23 '13 at 08:14
Are you using an external stylesheet, or are all of your styles inline? — sheriffderek, Jul 23 '13 at 08:27

score 2 · Accepted Answer · edited May 23 '17 at 12:12

You can do this by either setting the background image via jQuery/JS or by setting a class on the item and having the background images defined in the CSS.

To do the first, you can read through this thread: change background image in body

Basically

$('.icon').click(function() {
    $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});

OR

$('.icon').click(function() {
    $('body').removeClass().addClass('bg-1'); 
    //removes all classes, then adds the new class
});

Where .icon is whatever thing you want to click to trigger the change.

You would then just declare a background for .bg1 in your CSS.

score 1 · Answer 2 · answered Jul 23 '13 at 08:17

1

you can do it in jquery this way

JS CODE:

var url="http://......."
$('...').on('click',function(){ 
    $('body').css('background:',url);
});

Note: the click event can be called based on specific selector(class,id or tag name)

Happy Coding :)

answered Jul 23 '13 at 08:17

dreamweiver

6,002
2
24
39

score 0 · Answer 3 · answered Jul 23 '13 at 08:19

0

You can do it via CSS3 transitions, like shown here.

answered Jul 23 '13 at 08:19

Daniel Schmidt

11,605
5
38
70

How to change background

3 Answers3