Member Avatar for freakvista

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
  • 98 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by freakvista
Member Avatar for JorgeM

Have you written any code as of yet to work with?

Member Avatar for freakvista

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.

Member Avatar for freakvista

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 ...

Member Avatar for JorgeM

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

Member Avatar for Gaqua77

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

Member Avatar for freakvista

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...

Member Avatar for freakvista

It doesn't matter... i found out how

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.