How can I make my page scroll while keeping the background fixed?

  • 0
  • 3
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
Good evening everyone I have asked this question before but I think I explained it wrong.. I am trying to have my background fixed while text and other objects move on the page while scrolling. Can anyone help me with a code for this issue, Thanks in advance for the help
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb

Posted 5 years ago

  • 0
  • 3
Photo of Alannah3334

Alannah3334

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

I answered you earlier today on the original post, but no worries, here it is again!

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.

It's a css style sheet.

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%;
}
-->

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.

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.

Also make sure that you put the code in the HEAD section of every page that you want the effect on.

Give it a try and test in preview before you publish to make sure everything is working. I did find that I had to use something a bit different on my page that has the blog element, something in this css conflicted with it.

I hope this helps! Let me know if it does!

Regards,

Alannah
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
Thanks Al I will try it in a few
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
Good luck, if this message doesn't give you all the code, (I had to update 5 times), I can email it to you separately if needs be.
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
how do I add the image im trying to use?
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
savedadayradio@aol.com I would like you to email it to me just incase i missed something
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
Sorry, was away from the computer for a while. I will email you in a moment, the sender you'll be looking for is kerfootfarm@msn.com, just in case it lands in your spam box.
Photo of Mike F.

Mike F., Alum

  • 184,358 Points 100k badge 2x thumb
Thanks for sharing Alannah3334
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
No problem! My pleasure. I hope this helps others. It's working great on my site.

I really appreciate the forum, I've learned a lot from following the threads. Hope life is a little easier for you folks this week.

Cheers,

Alannah
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
Thanks for all your help i really appreciate I got it done now all i have to do now is somehow resize my image to make it a complete background
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
You are welcome! Is the picture not filling the screen? The code should force it to do so, unless maybe you are starting with a very small image. What are you seeing on the screen? Would you mind posting your url so we can take a look?

Good luck,

Alannah
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
http://www.savedadayradio.com/Live-St... WELL maybe i can resize it seperately and then publish the new size
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
Ok i think i got it
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
I think you do! I just took a look, very cool site! Congrats!

Best wishes to you!
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
Thank you so much you was really a big help to me i appeciated greatly
Photo of Alannah3334

Alannah3334

  • 1,034 Points 1k badge 2x thumb
You're are very welcome! Good luck with your business!
Photo of bluecolt010624

bluecolt010624

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
Scroll center image (frame).


Hi Mike F.

I am trying to scroll just my center image(s) (frame). If we look at the web page(s) as three frames (or parts) there is the center web site itself, the left margin, and the right margin. I would like to know if there is a way to keep the center area (image or my actual content) one color and the outer margins a different color, and in addition would I be able to scroll just that portion of the site, (the center frame).
Photo of Tracey0659

Tracey0659

  • 150 Points 100 badge 2x thumb
If you go to your page settings then advanced setting and put in this code in the Head tag html box

<style>body { background-image: url("http://www.rivercruisevacations.ca/200238179-001.jpg"); background-repeat: no-repeat; background-attachment: fixed;background-position: center;background-size:100%}</style>

but replace the image link with the one you upload (name of your website/file number of picture (don't forget to publish it first) then it should work - I just spent 1/2 hour on chat and they told me it couldn't be done - well, mine worked check it out www.rivercruisevacations.ca 
The dark brown center is added as a rectangle. You will have to do this separately for each page.
Photo of Drew N

Drew N, Community Manager

  • 256,986 Points 100k badge 2x thumb
Thanks Tracey0659.

There is very little that can't be done, but our support personnel are not able to assist when code is involved.  I am glad you were able to get the code you needed.

Drew
Photo of bd7090

bd7090

  • 152 Points 100 badge 2x thumb
So are there any SiteBuilder tools to make a fixed background with scrolling content on top?
Photo of Drew N

Drew N, Community Manager

  • 256,986 Points 100k badge 2x thumb
Unfortunately not. You would need to use code for this.
Photo of Bill5099

Bill5099

  • 3,114 Points 3k badge 2x thumb
Hello. 

Hope you don't mind my jumping in here. It's not the exact same question, but its related.

How do you create a "fixed width" banner or image? I get how to do the background image. But what I want is to have a background that is the full width of the page-always-and perhaps only 2 inches high. Like at the top of the page and/or as a footer or even in the middle of the page that I can write over. 

Right now, elements or photos shrink/expand according to the visitor.

Anyone know the proper coding? Thanks.

Bill
Photo of Drew N

Drew N, Community Manager

  • 256,986 Points 100k badge 2x thumb
Hi Bill5099,

I have never done this, but I believe what you are looking for is called a persistent header. You can do a Google search to help with the HTML and CSS.

Drew
Photo of Bill5099

Bill5099

  • 3,114 Points 3k badge 2x thumb
yes i got that i can do that. but the person above seems to know what they are doing and rather than google until i'm 85 and drool is coming out of mouth i figured i would try this. it is probably an easy code like the one supplied for the background.
Photo of Bill5099

Bill5099

  • 3,114 Points 3k badge 2x thumb
but alas, i have figured it out: here is a hidden link to a page i am testing out. both the footer and header are "responsive" to the visitor(something that Homestead must eventually upgrade to): http://www.thecrickethillcompany.com/test.html
Photo of liz5043

liz5043

  • 164 Points 100 badge 2x thumb
This is what I'm trying to do, and I can't figure it out. Do you have the code or any tips on how to get the responsive header operational on a homestead page?