I am trying to set background image .but I am background image come forward or above to current image . how to set background image ? background image mean it always behind the current image ?
here is my code
https://codesandbox.io/s/aged-lake-wx0tf?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,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"
/>
</div>
</body>
</html>
my background image come above the glass image.
Expected output. it should come behind the glass image
https://codesandbox.io/s/aged-lake-wx0tf?file=/index.html:0-5825
In css add this:
.abc img {
z-index: 100
}
and this:
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
z-index: 1;
}
The z-index property specifies the stack order of an element.
Also, visit: https://www.w3schools.com/cssref/pr_pos_z-index.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(/a.png);
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxASEhAQDxIPDw8PEA8PDw0PDw8PDw8PFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDQ0ODg0NDysZFRkrNystKys3KysrKy0rNysrKystLSsrLSsrKysrKy0rKysrKysrKysrKysrKysrKysrK//AABEIARQAtwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAACBQYBB//EAEUQAAICAAIGBQcICAUFAAAAAAECAAMEEQUSEyExUQZBYXGRIiNScoGhsQcUJDJCc7LBFURiZIKSk6Kjs8LR8DNTVIPS/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oADAMBAAIRAxEAPwD6GkYrECgjFYm9ZHrEMog0EOsirBYUCUEIJBdRLLPFlxAmU9nokgeSZS0kDzKeZS0kCuU8yl55AGRPCISVIgCKypEK0oYASIGwRloC2UK2CSWeSAlXGKxF640kag6CGQQSwywq6iEEoohFkF8pcCUJyGZ4DeTyE5yvpNa++uhwMz/1UZd3Uc84HTiezn10xZ9tqq+zefiJcaUB/WUH/pJ/KBuz2Yox/wC8r/QMt89/eV/oGBsSTGOO/eU/oyjaTy/Waj3oV/KBtyTBOmLPsGizu2uf4RCYDTbPYKrKnQtnlZqMK+HDMwNmVMtPIFDKGXMoTAo0XsjDwFkBdpJGEkoRqjSxOsxtDGoOhh1MAphkMKOsuog1MKsgU0xZlXqjjYdT+Hi3uGXtlcFXkBFse+tcF6q1/ubefcFmjTKGElpVZYSD0ASao5DwkE9geao7JJ7JAqYhj692sOKnMHuj5gL1zBgFqfWUMOsZz2J6LfyWT0G3dx/4Y4YFDKGXMG0CrwFkOYvYZQOSVHXJAzEMbqMTQxmoyobUwyGL1mGQyKYUwywCmUx12rXY3JGy78sh75Bm4F9d3s9JiR3Z7vdlNiuZOi1yUTWrlDCz2VBnucgtLSshMD2eGTOQwPDB2QkGxgI4dtW7LqcEe0b/AMppGZGNbVZG5MM+7OaxMCjShlmMGTAqxi9hhGMA5lHhMk8kgZSGM1RKt43U0qG0MKhi6mGQyKZQxLT9mVOXp2Vr/drfBTGVMyuk1uS4celf8KngOYHgO6aNZmXg23R+t4DaGWECHllaQGznmcGGnutAJnKkyutPC0C2co5kLQTtAz9L71PdNLDW6yI3pIp8RMvSLbjGtEtnRV6gHgcpQ2TKMZINjAqzQLmesYImB6xkgnMkDFpsjtTzFouj1NsDVR4wjTOrsjCWSofVpznTa7VGDP7yV8aX/wBpsrZOb+UY/RBaP1fEUWnsUts2PhYZFbGDv3CaNd043RWkgQN826cX2wN5boQWzGXFQoxMDWFs92kyxiZf5zA0TZK7SIfOJVsRA0DZBPZEjiIGzExBNIXbjHtCnzFXqk/3Gclp7SgStznwBnU6KBWmlTxWpAe/VGfvgPM0GWlGeVZoHjGCYyM0GWhHjGSUYzyVXF4bEzSpvnLYe+aVGJmR0tV8ZS6YNOJjiYiUbC2wGlsMt9F1DfVuresnlrDIH2HIxZL4QXxR8y0HpBwupZutpY1WrydTkfhOmweleZmB0+wTYa8Y+oZ03ZJiVH2bOCv7R7x2xKrFgqHrOanfmJB31WkxzjKaRHOfP69J9sKulu2B9AXSA5wgx45zgU0z2y/6a7YHefPxzlTjxznCfpv9qeHTPbA7h9IjnM/F6XAz3zkn0t2zO0ppcVIXc+qvWxgbe2OLxeHwo3h3Flv7NNZ1mz78gPbPq20nzr5MtEPXW+NxAIvxYGop414cb1HYW492rO420ocLyhsihulTbCGWeULwDWyhtlBmaSLNbJJR8xqtjtV8xqrI1VZIrcpxEdqxMwK7Y1XfA368RDrfMOu+GW+Bq4lUtR6rVD12KVdTwIM+R6b0diNF2+TnbhLD5tzvBHoPyce/iOz6YmIlrxXajV2qtiOMmRhmCIHzOjS2Gt4saX5Nwz75a6s8UdHH7LDPwl+kvQN687cHnbVvJoJztT1fTHv75zWj3dSQr11sDkRYgOR4ZEFTA2GxDL9bP35SfPR6XvmtgaMU2WridFNwyF6Mnwr/ADjt+jMXlm1vR9R6QL5/hgc4t7Hhn38BGa3Ub7bUQcsyT7pXHixVJOLwDb/qU0OfeaxOdNFlrhK87rG4JWhzPsHAQN3FdI6axlSrWP6bblHblNnoP0Vtxli43HZmhSGqqbdtiOG7/t/HujXRT5PkTVux2rY+4rhRvrX1z9o9nDvn0E3ctwHADgBAf2s8N0zmvlTiJRoG6QXTNOIk28DRa6UN8zziJU3wH2ukmY2IkgfO67I1XbMut40jyDSSyMVWzMSyMV2QNRLYZbpmpZCrZA0hbCLbM5bIRbIGmt8zdK6Ew2IOtYg2nDar5L5ciRx9ssLYRboHE6R6KVC3Y1WWLYVDqtlW0Rl4Zq6HPiDuKwF3Qm6oa97CqoDfZsb2yHdqztkdVx2j7WVHVntw9iuoZSr1lxx6w1c2/lcGF+bV10V012X21VBq6kRhrMATmBA4PQnRHCWILNfE2Kd6ua1w9bjmoJLkdvkzsNF4GnDgilFQn6zZeU3eZVXAAA3AAADkBuE8N0DQGIkN8z9rPDbAdN0ob4kbZTawH9tPDfEDdK7aA+b4NsRETdBtbAebESTNNkkDkkeMI8QRodGgPJZDpZEFeFV4GglsMl0zleFWyBorZCLZM8WQi2wHxZLCyJiye68AenLyqVOOKYilh45fnPekmPa23AhjmBch8Ijp5/ND72k/4glNJv57B/eD4GB0u1k2kR2s92kBzazw2RUPPGsgMmyUNsXNkoXgMtZK7SLGyVNkBk2QZsizWQbWQGWtnkTNkkDARoVXiitCq0BtXhA8TVoVXgOLZCh4krwqvAdWyXDRNbIQWQG1slxZEw8sHgD00/mv46v8xYPSD+ewnr/6TK6XbzR9ar/NWCxjeew3rf6DA3Neeh4vrSa8BrXlS0XLypsgMF5U2RfXnmvAOXlC8CXlC8AzPAs8GXlGeAQvJAM09gYoaEVoAGWBgMhpdWiwaXDQGg0urxYPLBoDavCB4kHhA8BwNLB4mHlg8C2kmzqb+A+DiCxLedw/efwGVxr+Q3d+YgsQ3nKPb+EwNnXk2kT2km0gNmyeF4ttJNeAwXldeA15C0AxeULQReVLQCFpQvBlpQtAKzyQBMkDNEsM4+iRhK4GWM5YA8jNlax/zKNVUjkPdA59QeR8JcK3I+E6augch4CMJSOQ8BA5QK3I+Blgjcm8DOvrw45DwEYTDDkPAQOKCN6LeBlhW/ot/KZ3Awo5DwEL81HIZ9wgfPcWjajZqw3HiDA25l6cgSd+4bz9UzvdPYYDDYjcN1NpzyHUhmHhcGFxWAyH1xaT2nYvAy9m/ot/KZNm/ot4GfQvmYPUPAShwi8Mh4CBwOzf0W8DIEb0W8DO+OFX0R4CDbCryHgIHCFW5N4GTJuR8DO1bDryHgIGzDDkPAQOPOfI+E8OfI+E6v5uvIeAlThxyHgIHJnPkfCUOfbOqegch4CBfDjkPAQOZMk32w45DwEkDIrEarWDrWOVJAtUkbqSeU1x2qqB5VXGErl6a4wtUAddcYSswqVHqjFFDvurGeRyZickU8ies9gz6uEAIThC6vwmnVoVzxc/wqFHvzMOvRct1k95LfGBxvTTFLVgrjmNa0ClBzLnf/brH2TjMN0iXb4FyTq0MFcnqVvJY+wEzqemegXFoVgUSvI1CyvOu4nPWO4jsHVwMw8RoQvkpTD1jLe9NTsx7Mtc7/ZA+ltXygBTvguhnR3E2YcG0OgrJRGcZNZWPqtlnnw3b+U3P0Ay79Zs+/P3HdAx9jv374OygzWtwFq8ALB6P1Hy7M9xPhFcg2ZXq3EEEMrdYIO8HsgZr0Re2nnNVqvdF3qz9kDKaqVZI8apU1boGa1cEVj719UE1cDPauSNOskDnaUj9NcDSkfoSASmuPV18JSmuO1pA9rqjS1SVpGq0gSunlK9DukOHxFSopVb6xlbSeIb7TL6QJzOfbG6U4z570g6JslheoN9YsjIdWxd+Zy9Ib+8dUD7Elo5wjWn7JnxTAafx9Hki42AfYuHlDvz3++btHygWgDaVKx68nKfHOB22ksOGPl5E5bj/tFv0fX5I1VYEZ+UufxE5dOkJxma1UZNwOtfQufdrssYFGITJrEKKo/8jBn3CwwOy0ZhlrJNY1c9xCnJTkMhmBu4ATT2vP4z5g/ygV15qlVpK7t9iKpPeM5nYv5QsWw81XUn3jO//wAyj649o68pzC6Vw9+JuqoKuaq121iHNdfWyVMxuJADZ96jq3fNbMbpLG5o91rVn61OGUVVkcnYZbvWJnc9BujvzZLHIAe0KuS56qquZAGfHeSc+vOQbRqgXpEeYZRduyUZ7VDlF9lxmg0XtEgznSCsrjdggXMBN65IVpIHO0iaFAiVIj1MB6qOVmJVGNVNA0Ko1VlM+t43U0B+vdCmlW3EZ98XraMId8oUxOgqrBkyqRxyZVce+ZmJ6F4c8EA9V3X3cJ0ol890g+c9I+iaYWh8RVr51smspZSChYKTwz3Zg+yc7hde+2jDgkG51TPPgvFj7FBM+o9MMvmWL+4c+0DMTmNEYBFx2jyAP+jdZ/FsiPzMBxPk+ww3+db1rBv/AJQJo4LodhEyOyr5+VrW/jM6XOUB4yhanAVpwUdg6h3CHz3GW1hBs0AbxZx74axora0AVm6LWmHtMTuaQBtaLuYS1ovZAqxnsCzSQMeoxuppno0ZqaBp0tGUaZ9bRlGgaFbRqt5nVvGUeBp1vGUfOZlbxup4GjW+7KER4mtkulsoR6YH6Fiu2rLxIH5zEwZ+nYHsw1v4Jo9Mbvod457FfG9BMnCP9OwfZh7fwSDudbhBs++B2k8eyUG2kpZZBmwZQTNAtY+6KWtwhbHzithkFXeK3GXZ4vY0AdhgS26e2GC1oA2MkrYZIGIkbqkkgNIYwkkkAyGOVGSSAxWYdGkkgMqxls988klGN0xP0V/vMOP8dJn4Y/TsL9xb+CSSQdZrShYySSiaxldY75JIAi0XsbjJJIF3MCxkkgLWmCEkkATmSSSB/9k="
/>
</div>
</body>
</html>
Related
I want to get rid of all white spaces from my website in html , the more I move my text to the right the more the space whitespace it creates on the right side of the page. Like you see in the photos there are a lot of whitespaces I suspect it is the elements creating these spaces , can someone tell me how to get rid of it . if anyone can help me please do so.
.btn_earnmoney {
height: 100px;
width: 100px;
position: relative;
top: 350px;
left: 710px;
padding: 0;
border: none;
background: none;
}
.Balance_Text {
font-size: 150%;
position: relative;
top: -800px;
left: 10px;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
background-color: #f1dd84;
background-repeat: no-repeat;
}
.Background_img {
/* non available image replaced with dummy image */
background-image: url("https://dummyimage.com/300x300/d936d9/000000&text=some+background+image");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-color: #f1dd84;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<div class="Background_img"></div>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
What I would do:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
style.css
body {
background-image: url("yourUrlHere");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
You can find those properties for the background in this W3 link
I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!
Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units
there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Bar</title>
<style>
body{ overflow-x: hidden; }
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.
I have this html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tablezone.css">
<script src="table.js"></script>
</head>
<body>
<div id="divTable"; class="zone"></div>
</body>
</html>
here is javascript code :
var img = document.createElement("img");
img.src="/Tables/table.png";
var src = document.getElementById("divTable");
src.appendChild(img);
here is the css code:
body{
background: url('/Tables/Riviera.jpeg');
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.zone{
background: rgba(200, 200, 200, 0.7);
width: 1000px;
height: 600px;
margin-left: 200px;
}
when I run the code on a web browser the div is displayed with no image inside it.
The script runs before divTable has been added to the DOM, so the line document.getElementById("divTable") returns null. Moving the script tag to the end of the body ensures that the divTable element is in the DOM before getElementById runs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tablezone.css">
</head>
<body>
<div id="divTable" class="zone"></div>
<script src="table.js"></script>
</body>
</html>
sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>
I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}