Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

i try to change my website i want to put fixed background and the text scrolled over it

hi all
i try to change my website i want to put fixed background and the text scrolled over it
mean when the i scroll the page down  the background fixed and the text and the contained of page  scroll over the background

thanks
0
nasemabdullaa
Asked:
nasemabdullaa
  • 4
  • 2
  • 2
  • +3
4 Solutions
 
Irwin SantosComputer Integration SpecialistCommented:
can you post your code?
0
 
hongjunCommented:
Use something like this

<body style="background-image:url(myimage.gif);background-repeat:no-repeat;" bgproperties="fixed">
0
 
hongjunCommented:
Or

<body style="background-image:url(myimage.gif);background-repeat:no-repeat;background-attachment:fixed">
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
nasemabdullaaAuthor Commented:
hi
i use this code to stretch the background picture and i want to make it fixed

<html>
<head>
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>

<body>

<div id="bg_image">
<img src="images/intro.jpg" style="width: 100%; height: 100%;">
</div>

<div id="contents">
This is a test.
</div>

</body>

</html>
0
 
walkerkeCommented:
hongjun has the right idea. Assuming the image you have in your first <div> is the image you wish to be fixed in the background, replace your <body> tag with his and get rid of your first div.

<html>
<head>
<style type="text/css">
   body {margin: 0px;}
   .contents {z-index: 1; position: absolute;}
</style>
</head>
<body style="background-image:url(images/intro.jpg); background-repeat:no-repeat; background-attachment:fixed">

<div id="contents">
This is a test.
</div>

</body>

</html>

Or you can include the body style in the style definitions in the head.

<html>
<head>
<style type="text/css">
   body {margin: 0px; background-image:url(images/intro.jpg); background-repeat:no-repeat; background-attachment:fixed}
   .contents {z-index: 1; position: absolute;}
</style>
</head>
<body>

<div id="contents">
This is a test.
</div>

</body>

</html>

Although you can position the first <div> tag absolutlely in relation to the its container, you cannot position it in relation to the window. In this case the <div> is contained within the <body>. If the body becomes taller than the window, part of the body can be scrolled off the top along with the <div> it contains. Using hongjun's example makes the image part of the body, but fixed to the window.

Unfortunately, I cannot find a way to make the image fit the window. It can be positioned in the center of the window by adding "background-position: center;" to the CSS.
0
 
hongjunCommented:
0
 
jfredricksonCommented:
If you want to do it with a div, you will need to place all future divs inside the div that you are using to hold the background image. Of course this is a little unnecessary since you can just style the body tag as is mentioned above. Either way, I would recommend doing it in the CSS and not the HTML code.

The div method has its benefits, so I will explain a little more about how this can be achieved...

Change your HTML code to this:

<body>
    <div id="bg_image">
        <div id="contents">
            <p>This is a test.</p>
        </div>
    </div>
</body>

And then style it like this:

<style type="text/css">
    body
      {
            margin: 0px;
            height: 100%; /* Needed so that #bg_image will expand to 100%. */
      }
   
      #bg_image
      {
            position: absolute; /* Also needed for 100% height. */
            background: transparent url(images/intro.jpg) top left no-repeat;
            width: 100%;
            height: 100%;
      }
</style>

You'll notice that you need to specify 100% height for the body since it is the container for #bg_image and for a div to expand vertically to 100% its parent container needs to have a specified height. This won't stretch the image, but it will place it fixed at the top left of the page. If you want it to tile, just change "no-repeat" to "repeat". If you want it to be positioned somewhere else in the page, you can change "top" and "left" to reflect that. The #bg_image div should fill the entire page, so you can then place your image anywhere in the page within that div.

By putting your contents div inside #bg_image you are placing everything in that div on top of the bg_image. Is this what you were trying to do?
0
 
EsopoCommented:
>>...stretch the background picture and i want to make it fixed<<

http://www.netbulge.com/index.php?session=0&action=read&click=open&article=1113897705
0
 
jfredricksonCommented:
Does that mean that we have to respond in order to show interest?
0
 
hongjunCommented:
split
0
 
EsopoCommented:
>> >>It is assumed that any participant not responding to this request is no longer interested in its final disposition.

>>Does that mean that we have to respond in order to show interest?

It is just an example of ridiculously bad wording, or organization, or both. I have been complaining about that automated message since I first read it years ago.

Bottom line:
>>It is assumed that any participant not responding to this request is no longer interested in its final disposition.
Bad, bad assumption.
0
 
walkerkeCommented:
split. all responses have merit.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now