• 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!

AAC MyACC make the website picture stay on scrolling?

Joriku

Working in the mines, need something?
Joined
Jul 16, 2016
Messages
1,076
Solutions
15
Reaction score
370
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 {...
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
 
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);
 
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:
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
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)
 

Attachments

  • index-basic.css.zip
    10.2 KB · Views: 8 · VirusTotal
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
 
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.
 
Back
Top