0

Hi. I am starting a project and here's the basic idea: i'm trying to make a button that changes the background(not hard) but now i want to make the background image fit the size of the screen, and if possible not with css(php or javascript would be great) because it'll be easy with a function, but if there is a way to make some magic to the background with css let me know. There are 10 different backgrounds and i want to put the url from the internet because the resolution of monitors differs. Thank you!

3
Contributors
8
Replies
9
Views
5 Years
Discussion Span
Last Post by freakvista
0

i've finally done it... with css:

<style type="text/css">
        body {
        background-size: 100%;
        } 
     </style>

this was the previous and it wasn't working and it seems i just had to add another 100% and now it's all working fain, thank anyway.

0

now i have another problem, i want to make that button change the background and another picture(the picture is the same image as the background but smaller and centered). I can change the background with the button but the picture ...

0

Where is the picture? Is the picture the background-image for the page, just an element on the page that you need to update?

0

You can set up the backgrounds with the help pf cascading style sheets. Css has made web designing so easy, quick & manageable.

0

I looked everywhere but didin't find...
this is my code:

<html>
<head>
 <title>Change Background onClick</title>
    <style type="text/css">
    body {
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:100% 100%;
    }
    </style>
    <script type="text/javascript">
        var contor=1;
        var MAX=2; 
        tari=Array("",
                    "one.gif",
                    "two.gif",
                    "",
                    "");
        function changeBG(){
            document.body.background=tari[contor];
        }
        function right(){
            if(contor==MAX){
                contor = 1;
            } else {
                contor++;
            }
        changeBG();
        }
        function left(){
            if(contor==1){
                contor = MAX;
            } else {
                contor--;
            }
        changeBG();
        }
    </script>
</head>
<body>
    <img id="b_left" src="http://courses.cs.vt.edu/~csonline/toolbar/left_arrow_button.gif" onclick="left()" style="cursor: pointer;" />
    <img id="b_right" src="http://www.starbuckdragonboat.com/images/red_arrow_button.jpg" onclick="right()" style="cursor: pointer;" />
    <script type="text/javascript">
        changeBG();
    </script>
</body>
</html>

and i want the background to change more smoothly, i mean with a fade out and fade in but i couldn't make it...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.