Skip navigation
Currently Being Moderated

Fix background image within div

Jan 29, 2013 3:18 AM

Hello

I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.

 

I'm trying to make the background image within a div to be fixed when i scroll vertically.

Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)

 

Here's my code

 

CSS

 

body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
}


#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;

 

#header {

background-repeat: no-repeat;

clear: none;

float: none;

height: 214px;

width: 1000px;

background-image: none;

position: relative;

padding-top: 10px;

 

#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
}

 

#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
}

 

#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
}

 

And here is my HTML

 

<!-- InstanceBeginEditable name="RightDiv" -->

  <div id="rightDiv" style="background-image: url(Images/informacao.png)">

  </div>

 

  <!-- InstanceEndEditable -->

 

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).

 

I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.

 

I've been trying to fix this for days.. Help would be much appreciated.

 

Funny thing is that this only happens in IE9.. Chrome works perfectly.

 
Replies
  • Currently Being Moderated
    Jan 29, 2013 6:09 AM   in reply to DevilUrd

    You need to use the background-attachment attribute and set it to fixed in conjunction with the background-position attribute to get it where you want it.

     

    http://www.w3schools.com/cssref/css3_pr_background.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 7:53 AM   in reply to DevilUrd

    DevilUrd wrote:

     

    Didn't work. sorry, but i don't think i understood ur reply quite well..

    Here's what i used:

     

    <!-- InstanceBeginEditable name="RightDiv" -->

    <div id="rightDiv" background:  url('Images/informacao.png') no repeat fixed;>

    <tr>

            <td>textextextextextextextextext</td>

          </tr>

    <!-- InstanceEndEditable -->

     

    Could u pls be a little more detailed?

    sorry, but i'm still very unexperienced at this..

     

    That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...

     

    <div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">

     

    But it would be better to place it in your css instead...

     

    #rightDiv {

    clear: none;

    background:url(Images/informacao.png") no-repeat fixed top left;

    float: right;

    height: 484px;

    width: 755px;

    position: relative;

    overflow: auto;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 9:23 AM   in reply to DevilUrd

    After a little research, I found that is actually "the way it works" in IE, all versions. A fixed background image goes off the browser window for positioning.

     

    The work around is to place a container div around the div that scrolls. Place the background image into that container div without any positioning or attachment css and turn off any background image or color in div that scrolls.

     

    Something like this...

     

    <div id="rightDiv_bg" style="background:url(...">

         <div id="rightDiv">

              your content here

         </div>

    <div>

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 9:30 AM   in reply to DevilUrd

    There are 3 types of CSS:

     

    • External = a separate physical file to which all your HTML pages are linked. This is for site wide styles.

     

    • Embedded = inside <style> tags inside <head> tags in your HTML document. This is for page specific styles.

     

    • Inline = inside <style> tags inside your <body> tags.  This is mainly used for HTML E-mails and rarely used for web sites.

     

    To change backgrounds on child pages, use Embedded CSS.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 2:06 PM   in reply to DevilUrd

    Did you see/try my last post?

     

    A fixed background in a div will not work in IE. It will always go off of the window, rather than the div itself. You need to basically trick IE by placing your scrolling div inside another container and in that container, place a standard background-image with no attachment info.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 2:44 PM   in reply to DevilUrd

    To further complicate matters, if you're testing in pre-IE8 browsers, fixed background only works on the body selector.    Ah the joys of modern web!

     

     

    Nancy O. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points