• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!
  • If you're using Gesior 2012 or MyAAC, please review this thread for information about a serious security vulnerability and a fix.

AAC MyACC make the website picture stay on scrolling?

Joriku

Working in the mines, need something?
Joined
Jul 16, 2016
Messages
1,033
Solutions
15
Reaction score
323
Location
Sweden
YouTube
Joriku
Hi,
For anyone that knows some website coding this Is with MyACC.
My question is, how do I make the website picture stay in the same form 1920 x 1080 if you scroll in & out?

Before:
129fd37be882a8a379b934b5d4941b9b.jpg


After
d9a7a3c2cc3328dd860c2b0184824607.jpg
 
Solution
I don't think anyone will use that feature to zoom-out your website, well maybe like 0,001 % :p

But well, if you really want it, lets try.

I found this on the internet, try to zoom it out: Full Page Background Image | Progressive (https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php)

It's described here: Perfect Full Page Background Image | CSS-Tricks (https://css-tricks.com/perfect-full-page-background-image/)

1. All you need to do is do like @Snavy said, change this:

Code:
<div id="ArtworkHelper" style="background-image:url(<?php echo $template_path; ?>/images/header/<?php echo $config['background_image']; ?>);" >

Remote the "style" part here.

2. Add in basic.css at the top:
CSS:
html {...
OP
OP
Joriku

Joriku

Working in the mines, need something?
Joined
Jul 16, 2016
Messages
1,033
Solutions
15
Reaction score
323
Location
Sweden
YouTube
Joriku
add this to the stylesheet rule responsible for background image:
CSS:
background-attachment: fixed;
background-size: 100%;
Can't seem to get it to work, tried it inside:
Index.php
config.ini
basic.css
None of them seem to allow it to stay
 

Snavy

Bakasta
Senator
Joined
Apr 1, 2012
Messages
1,249
Solutions
71
Reaction score
612
Location
Hell
Can't seem to get it to work, tried it inside:
Index.php
config.ini
basic.css
None of them seem to allow it to stay

Make these changes:

Add to body in basic.css:
CSS:
background-image: url('/templates/tibiacom/images/header/background-artwork.jpg');
background-attachment: fixed;
background-size: 100% 100%;

Remove from <div id="ArtworkHelper" ...
CSS:
background-image: url(templates/tibiacom/images/header/background-artwork.jpg);
 
OP
OP
Joriku

Joriku

Working in the mines, need something?
Joined
Jul 16, 2016
Messages
1,033
Solutions
15
Reaction score
323
Location
Sweden
YouTube
Joriku
Make these changes:

Add to body in basic.css:
CSS:
background-image: url('/templates/tibiacom/images/header/background-artwork.jpg');
background-attachment: fixed;
background-size: 100% 100%;

Remove from <div id="ArtworkHelper" ...
CSS:
background-image: url(templates/tibiacom/images/header/background-artwork.jpg);
Did that now, background is gone after removing
background-image: url(templates/tibiacom/images/header/background-artwork.jpg);
which btw looked like this from tibiacom layout.
Lua:
<div id="ArtworkHelper" style="background-image:url(<?php echo $template_path; ?>/images/header/<?php echo $config['background_image']; ?>);" >
This ended up with background not showing up at all, and the other things are not working, sadly.

this is how it looks like in basic.css
Lua:
body {
  margin: 0px;
  padding:  0px;
  background-color: #051122;
  background-image: url('/templates/tibiacom/images/header/background-artwork.jpg');
  background-attachment: fixed;
  background-size: 100% 100%;
}


Update:
9f0cfa887044ed536e5406addb39e3c9.jpg

Lua:
background-image: url("/templates/tibiacom/images/header/background-artwork.jpg");
  background-attachment: fixed;
  background-size: 100% 100%;
 
Last edited:

slaw

MyAAC Creator
Premium User
Joined
Aug 27, 2007
Messages
3,468
Solutions
113
Reaction score
905
Location
Germany
GitHub
slawkens
Twitch
PL_Flamaster
I don't think anyone will use that feature to zoom-out your website, well maybe like 0,001 % :p

But well, if you really want it, lets try.

I found this on the internet, try to zoom it out: Full Page Background Image | Progressive (https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php)

It's described here: Perfect Full Page Background Image | CSS-Tricks (https://css-tricks.com/perfect-full-page-background-image/)

1. All you need to do is do like @Snavy said, change this:

Code:
<div id="ArtworkHelper" style="background-image:url(<?php echo $template_path; ?>/images/header/<?php echo $config['background_image']; ?>);" >

Remote the "style" part here.

2. Add in basic.css at the top:
CSS:
html {
   background: url(images/header/background-artwork.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

3. Remove:
Code:
background-color: #051122;

From:
CSS:
body {
  margin: 0px;
  padding:  0px;
  background-color: #051122;
}

This is how it looks on my screen:
1619079498714.png
 
Solution

Rallelele

New Member
Joined
Jun 11, 2017
Messages
50
Reaction score
4
I don't think anyone will use that feature to zoom-out your website, well maybe like 0,001 % :p

But well, if you really want it, lets try.

I found this on the internet, try to zoom it out: Full Page Background Image | Progressive (https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php)

It's described here: Perfect Full Page Background Image | CSS-Tricks (https://css-tricks.com/perfect-full-page-background-image/)

1. All you need to do is do like @Snavy said, change this:

Code:
<div id="ArtworkHelper" style="background-image:url(<?php echo $template_path; ?>/images/header/<?php echo $config['background_image']; ?>);" >

Remote the "style" part here.

2. Add in basic.css at the top:
CSS:
html {
   background: url(images/header/background-artwork.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

3. Remove:
Code:
background-color: #051122;

From:
CSS:
body {
  margin: 0px;
  padding:  0px;
  background-color: #051122;
}

This is how it looks on my screen:
View attachment 57911
When I do these exact steps, the background-image dissapears fully for me :eek:
3eff2adf31ef4a4b02931e813ac94458.png

Gyazo (https://gyazo.com/3eff2adf31ef4a4b02931e813ac94458)
1664028813779.png
f72f83a0d492437e04f9ec96aee176c5.png

Gyazo (https://gyazo.com/f72f83a0d492437e04f9ec96aee176c5)
 

slaw

MyAAC Creator
Premium User
Joined
Aug 27, 2007
Messages
3,468
Solutions
113
Reaction score
905
Location
Germany
GitHub
slawkens
Twitch
PL_Flamaster

Attachments

  • index-basic.css.zip
    10.2 KB · Views: 3 · VirusTotal

slaw

MyAAC Creator
Premium User
Joined
Aug 27, 2007
Messages
3,468
Solutions
113
Reaction score
905
Location
Germany
GitHub
slawkens
Twitch
PL_Flamaster
Tried with your files even and it's the same problem for me, just a plain blue background. I'll keep trying. Thank you!

Oh, what might be worth mentioning is: maybe you need to clear cache in your browser. You can do that by right clicking in the browser window, then: Inspect. Then navigate to "Network" tab and check "disable cache" and then finally refresh the page.


Another thing that comes to my mind: do you have the image located there in the tibiacom folder? images/header/background-artwork.jpg
 

Rallelele

New Member
Joined
Jun 11, 2017
Messages
50
Reaction score
4
Oh, what might be worth mentioning is: maybe you need to clear cache in your browser. You can do that by right clicking in the browser window, then: Inspect. Then navigate to "Network" tab and check "disable cache" and then finally refresh the page.


Another thing that comes to my mind: do you have the image located there in the tibiacom folder? images/header/background-artwork.jpg
I'm browsing my server website using the incognito/secret browser or whatever it's called in english. So cache wouldn't be a problem, I do see all the other changes I make..

Yes. I did change background to another photo, but it's in the same folder and I used the same name as the previous one..

Thanks.
 
Top