Outreach child theme, fixed background image

[ACEkin]

I want to have the background image in the content part not to scroll. If I add the necessary declaration as:

#content {

    background: url("images/st-patrick_bg.png") no-repeat scroll center 80px #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    float: left;
    padding: 30px 40px;
    width: 450px;

}

It places the background image in the horizontal center of the content area. But if I change the scroll to fixed, whether I use center or a pixel value, the positioning is done in the browser window width. You can see the scrolling BG at:
http://www.friendlysonsprov.org/

I will appreciate assistance with this.

Cemal

[Tony @ AlphaBlossom]

Hi Cemal,

When you set the background-attachment to fixed, by default it "fixes" relative to the viewport, not the container:

https://developer.mozilla.org/en-US/docs/CSS/background-attachment

You'd have to use javascript to do it. You can consider using media queries with different css positions for different resolutions, but it's not going to be perfect until you get to full-width content. If you set the left position to 40%, it looks ok for a while. You'd have to play with it and tweak it for various resolutions, probably not the best option.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[ACEkin]

Thank you Tony, it was more a curiosity question than a must have. I will not pursue it.

Cemal

[Tony @ AlphaBlossom]

You're welcome, Cemal.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[vajrasar]

@acekin: Please mark the topic as resolved.

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[jtikcuf]

how did you do the login? on the side bar nice site!

---

Jtikcuf ‘~’

[Author]

Posts