For some odd reason I cant get this background image to be centered. Its only centered when the page is at 50% size.
On one of my other pages it works fine, however here it does not.
Current HTML:
<head>
<title>
Why are you here?
</title>
<link rel="stylesheet" href="Akari.css">
</head>
<html>
<body>
<div>
<h1>
<span class="colorYellow">Akari </span><span class="colorGreen">- Playstation</span><span class="colorAqua"> 3 VSH Menu</span>
</h1>
</div>
<div class="body">
<p>
This is the page for Akari! Akari is a WIP VSH Menu for <span class="CEX">CEX</span>/<span class="DEX">DEX</span> CFW/<span class="henpt1">PS3</span><span class="henpt2">HEN</span></p>
<a
href="https://github.com/JamesIsWack/Akari-Legacy-Edition/releases/download/v1.2.2-1/Akari.sprx">Click
here to download the latest release (v1.2.2-1)
</a>
<p>
<style>
p
{
color:rgb(194, 194, 194);
}
</style>
To install it, put the Akari.sprx into dev_hdd0/plugins, then add /dev_hdd0/plugins/Akari.sprx to boot_plugins.txt (COBRA), or mamba_plugins.txt (MAMBA)
</p>
</div>
<p class="main">
Screenshots
</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284617-befda427-14ca-463e-9e0f-4ab0ba59707f.png" width="400"></img>
<p>Menu layout</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284724-191861c3-29e9-4a31-ba99-6e157dc83240.png" width="400"></img>
<p>Menu Settings</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160466345-e4620c97-8dec-43ce-8689-09f05189fa98.png" width="400">
<p>Overlay and Settings</p>
<u1>Features</u1>
<li>
Ability to restart VSH, Hardware
</li>
<li>
Ability to show current FW version, LV2 Kernal mode (CEX/DEX)
</li>
<li>
Can be loaded by COBRA, MAMBA, and PS3HEN
</li>
<li>
Can take screenshots (BMP, PNG coming soon!)
</li>
<li>
Overlay with FPS, CELL/RSX tempature (F/C), FAN speed, RAM usage, and more
</li>
<br>
<p>
Note: this project has been deprecated. Please wait until Akari v2 releases. Until then, use this.
</p>
<br>
<p> </p>
</body>
<div class="navbar">
<a href="../index.html">
Back to home
</a>
</div>
</html>
Current CSS:
body
{
text-align: center;
margin: 0;
background-color: rgb(0, 0, 0);
background-image: url(../images/channels4_banner.jpg);
background-repeat: no-repeat;
background-size: cover;
color: white;
}
a:link
{
color: rgb(126, 70, 156);
text-decoration: none
}
a:visited
{
color: rgb(126, 70, 156);
}
a:hover
{
color: rgb(255, 255, 255);
}
a:active
{
color: purple;
}
.navbar
{
background-color: rgb(52, 51, 51);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
border-radius: 10px;
opacity: 90%;
}
.navbar a
{
float: left;
display: block;
color: rgb(96, 46, 122);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover
{
background-color: grey;
color: rgb(55, 37, 58);
transition: background-color 1s,
color 1s
}
.navbar a.active
{
color: white;
}
h1
{
background-color: rgb(46, 31, 56);
opacity: 90%;
}
.colorYellow
{
color:yellow;
opacity: 100%
}
.colorGreen
{
color:greenyellow
}
.colorAqua
{
color:aqua;
}
main
{
color:rgb(195, 195, 195);
text-align: middle;
}
.CEX
{
color:lightskyblue;
}
.DEX
{
color:darkred
}
.henpt1
{
color:grey;
}
.henpt2
{
color:darkgoldenrod;
}
what it's supposed to look like
I have tried changing the background-size but it hasn't gone anywhere.
This css code will get you a perfect full-page centerered background no matter the size.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}