Fixed Background Questions

User 217790 Photo


Registered User
45 posts

Is there a way to make the fixed background picture function the same on a mobile device as it does on a desktop? If not, why? Can the Content Slider be used as a fixed background?

Thanks to everyone that contributes to the forum. I learn so much from reading your questions and answers.
User 122279 Photo


Senior Advisor
14,650 posts

It seems to work with this styling:

<style>
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('path-to-image/img.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
.contents {z-index: 10;
margin-top: -200px;
overflow:scroll;}
</style>


Then in the html:
<body>
<div id="background_wrap"></div>
<div class="contents">
Some contents...
</div>
</body>


The negative margin on the contents class will have to be adjusted.
I have not tried this in RSD, though. And I will be away for nearly a week, only with a teblet pc, so I won't be able to try this for some time.

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 217790 Photo


Registered User
45 posts

Thanks Inger. Unfortunately I need a little further instructions. Do I make sure the style settings are as you listed in RSD or do I make this change after exporting in HTML Editor?
On the HTML, where do I make this change? Is this done by exporting and using HTML Editor? What do I put after some content ...?
Thanks for your help. Not a brand newbie, but not far from it.
User 122279 Photo


Senior Advisor
14,650 posts

I will have a go at it with RSD when I get back from my trip, on Friday, I guess. I hope to be able to do it within RSD, maybe with some extra styling, though.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 217790 Photo


Registered User
45 posts

I hope your trip is a good trip and you are able to enjoy the "away" time. This is the example I followed. It works, but only on a desktop. Doesn't work on Android or IPhone. No hurry. Just wanting to know how it's done. I want to incorporate it in to a website. Used the latest RSD. Only change I made was to add photos. Kept everything as the example showed.

http://www.coffeecup.com/help/articles/ … ackground/

User 217790 Photo


Registered User
45 posts

Welcome back Inger. Did you get a chance to see my previous post?
User 122279 Photo


Senior Advisor
14,650 posts

I saw your post. I was able to read the forum posts while away, but I couldn't do much to help, with just a flakey tablet pc.

I have not had a chance to play with the code I found yet. Workload has been massive. I'll try to make an RSD thingy out of this as soon as I get some free time.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,650 posts

I had a quick look again, and it seems pretty easy to make this in RSD (or one of the other two 'R' apps). Looks like you need two rows, one with a html element, and the other one with the contents. I think I will get some time tomorrow, then I'll post the result here.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,650 posts

So, check the second URL in my signature, where I have a collection of things to share. I've added the fixed background plot, and it can be downloaded and saved as a theme in RFF, RBB and RSD1.x, or as a component in RSD2.
I used the code I posted earlier, but there was no need for the negative margin on the contents column, as it slid up and covered the background as soon as that was made fixed. (I had first tried in HTML Editor, and there I needed the neg. margin).
Depending on the background image, instead of positioning it left and top 0, it might be better to change that to center for both vertical and horizontal, especially if there is a motive in the middle, which you want to be visible also on narrow screens. And the overflow is best set to 'visible', as 'scroll' might lead to scroll bars appearing.

Good luck with it! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.