Background Fixed Image
Posted
#3013
(In Topic #545)

Standard member

Back when ocPortal was around i ask a question about the background image to be a fixed type, so like if you open your page and scroll, the image just stays there but everything else moves thats what i want to put back onto my website using composr.
i know its in the global.css but not sure what to change as i also want to have it transparent.
could you please lead me in the right direction in where to find or add this please.
photo is below and you can see where the background dont stay

Last edit: by rgscriven
Posted

Site director

Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Posted

Standard member

Last edit: by rgscriven
Posted
Standard member

Here is my entry:
Code
html>body#main_website {
background: #AEAEAE;
background-image: url('{$IMG_INLINE;,back3}');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0px;
background-color: #000;
background-size:2500px;
}
My reference
Code
$IMG_INLINE;,back3
I uploaded the background image through the "edit theme images" and called it back3, hence the reference.
Adjust the remaining css to suit your needs.
The
Code
background-size:2500px;
Can also be removed, it suits my needs which is why I have it.
Posted

Standard member

I got the background image static now so its fixed, but with the inner website as it goes up and down with scroll i would like that to be transparent so you can see the whole background image behind the wording.
also i was going though some of your themes and i liked some so i may check them out also.
Last edit: by rgscriven
1 guest and 0 members have just viewed this.