Static background image

Avatar
Rob White IV
  • updated
  • Answered
I would like for my custom css BODY or #wrap background image to scroll with page content. The background-attachment is supposed to default to 'scroll' in css, but it seems to be 'fixed' no matter what I do. Can you help me determine how to set the content to scroll up and out of view when scrolling down into page content? See our site here --> http://support.c2cschools.com/


Thanks.

How would you rate the customer service you received?

Satisfaction mark by Rob White IV 9 years ago

Great response time. You guys are awesome.

Add a comment about quality of support you received (optional):

Pinned replies
Avatar
0
Sergey Stukov co-founder
  • Answer
  • Answered
Hello,

Try to replace this code in your custom CSS:
#wrap {    
    padding-top: 240px !important;
    background-image: url('http://resources.c2cschools.com.s3.amazonaws.com/c2c/v3/common/dist/images/support/header_background.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

With:
#wrap > .container {    
    padding-top: 240px !important;
    background-image:url('http://resources.c2cschools.com.s3.amazonaws.com/c2c/v3/common/dist/images/support/header_background.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    width: 100%;
}
Replies 1
Avatar
0
Sergey Stukov co-founder
  • Answer
  • Answered
Hello,

Try to replace this code in your custom CSS:
#wrap {    
    padding-top: 240px !important;
    background-image: url('http://resources.c2cschools.com.s3.amazonaws.com/c2c/v3/common/dist/images/support/header_background.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

With:
#wrap > .container {    
    padding-top: 240px !important;
    background-image:url('http://resources.c2cschools.com.s3.amazonaws.com/c2c/v3/common/dist/images/support/header_background.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    width: 100%;
}