Sung 0

I am very new at this. I simply want my background image to 1. change in scale according to the window size it's opened in 2. currently, the background image stays still with the contents of page moving all over the page (if I change the brower window size). I would like the contents and background to move/scale together.

what do I need to do?? current code for background

body {

background-image: url(http://example.jpg);

}

4 answers

0
points

sounds like you have a background on body, but auto margins on the other elements on your page.

you can wrap everything in a 'container' div and put the background and centering margins on that instead.

e.g

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
            <meta name="keywords" content="" />
            <meta name="description" content="" />
            <meta name="author" content="Tony Crockford  http://www.boldfish.co.uk " />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <style type="text/css" media="screen">

            div#container{
                width: 902px;
                margin: 20px auto 0 auto;
                background-image: url(http://example.jpg);
            }

            </style>    

    </head>
    <body>
        <div id="container">
            <div id="header">

            </div>
            <div id="nav">

            </div>
            <div id="wrapper">
                <div id="sidebar">

                </div>
                <div id="content">

                </div>
            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>
Answered about 7 years ago by Tony Crockford
Simon 75
0
points

This will help with the full-sized background image:

http://css-tricks.com/perfect-full-page-background-image/

You're talking about a "liquid layout", so google that for tutorials on how to best accomplish the result you want.

Answered about 7 years ago by Simon
0
points

It sounds like you have background-attachment: fixed; somewhere in your code. try

background-attachment: scroll;

Perhaps you could repeat your background using background-repeat, or set a background color and position it in the centre so it looks like it's scaled?

Answered about 7 years ago by Richard Wilson
Sung 0
0
points

Thanks for the tip, I tired it but to clarify what I want to do, how about if I want the all elements (charts/images/etc) of my page stay still together...as one unit of my page? Currently, the "elements" are like a "top" layer and move around while the background stays put.

What do I put and can I just add it to the end of my code or beginning?

Answered about 7 years ago by Sung