Please help if you have a answer for this subject

  • 0
  • 1
  • Question
  • Updated 6 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Good evening everyone.... I hope you'll doing well tonight. I been trying to figure out is there a way i can scroll my webpage with my background scrolling along with it? Thanks in advance for the help
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
  • done out of ideas lol

Posted 6 years ago

  • 0
  • 1
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Good morning, if I understand correctly what you want, it might be possible using code, but I am not sure. You want the background image to essentially float behind everything, and always be the background of the page, giving the effect that the image is always centered on your page, while everything else moves? Is that what you are trying to do?

Drew
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
yes that is exactly what i'm trying to do. Is it possible to help me out with that issue? If so thanks in advance.
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
I meant to write WITHOUT my background scrolling along with the page I want the Background to sit still while the page moves
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
Hi Traynitty4568,

I found some code that is working for me on my site. If you want to check it out the url is: www.healingspiritsong.com.

The code I'm using is:

<!--
html{
background:url(http://www.healingspiritsong.com/Page...) no-repeat center center;

background-size:cover;

background-attachment:fixed;
}
body{
min-height:100%;
}
-->

Obviously you'll want to substitute the location of your graphic for the one above, (between the parentheses) but the rest should work. This will also allow your background image to automatically resize to any monitor size and that is something you can test out at: http://quirktools.com/screenfly/. Just plug in your url and you can see how your site renders on everything from iphones to 24" monitors.

Hope this helps!

Regards,

Alannah
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
Sorry I'm going to try the code again, the message didn't include the first and last part for some reason.

<!--
html{
background:url(http://www.healingspiritsong.com/Page...) no-repeat center center;

background-size:cover;

background-attachment:fixed;
}
body{
min-height:100%;
}
-->
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
Rats! Still didn't. Let me try it this way.

Before the <! at the beginning you have to have

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

At the end you need

"</style>"

These open and close the code. Just make sure NOT to use the quote marks when you make your code, this was the only way I could get the message to show the css.

NOTE: your css has to be in the HEAD section of each page that you want the effect on.

Hope this works!

This conversation is no longer open for comments or replies.