I' m building a project whit a background image, but I can't completely center the image like in this
My goal is
What I managed to do is
as you can see the image is not completely vertically centered and if I resize the screen the pencil tends to disappear.
Here is the image in question.
Here the CSS code:
.app {
height: 100%;
background: url('./background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I thank anyone who can help me.
.app {
height: 100%;
background: url('https://laaouatni.github.io/w11-clone/images/1dark.jpg') no-repeat center center fixed;
background-size: cover;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="app">
</body>
</html>
try using background-position-y property
actually your background is centered, but the pen in the picture is not centered
add some code
so you can decrease the number in the background-position-y something like -10em looks good in my computer
position-y is like translateY but for background (is for moving the background vertically)
or (with less code)
or for good results use PHOTOSHOP and crop the space on top, to make the image centered, then put it in HTML
I know is not the best, but if you want less code ¯_(ツ)_/¯
and responsive
.app {
height: 100%;
background-image: url('https://i.ibb.co/pWsFM5S/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-position-y: -10em;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="app">
</body>
</html>
Related
Hi i am new to javascript, i wanted to do a scrolling show and hide for my 2 divs, however the one i did is currently when scroll it change to bg-2 already but the text is like cut. its not the exact same position as bg-1. Can i ask for help?
This is the code:
https://codesandbox.io/s/hopeful-estrela-zfkih7?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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div style="position: fixed; top: 0; width: 100vh; height: 100vh;"></div>
<div class="bg-1" id="bg-1">
This is testing UI
</div>
<div class="bg-2" id="bg-2">
This is another testing UI
</div>
<div class="bg-3">
This is third testing UI
</div>
</body>
</html>
<style>
.bg-1 {
height: 80vh;
background: blue;
position: relative;
z-index: 99999;
}
.bg-2 {
display: none;
height: 80vh;
background: red;
position: relative;
z-index: 99999;
}
.bg-3 {
height: 50vh;
background: pink;
}
</style>
<script>
window.addEventListener("scroll", function () {
var elementTarget = document.getElementById("bg-1");
var elementTargetRewards = document.getElementById("bg-2");
console.log("window.scrollY", window.scrollY);
console.log("elementTarget.offsetTop", elementTarget.offsetTop);
console.log("rewards", elementTargetRewards.offsetTop);
let lastScrollTop = 0;
if (window.scrollY < elementTargetRewards.offsetTop - 100) {
console.log("up 1");
$("#bg-2").show();
$("#bg-1").hide();
} else if (window.scrollY < elementTarget.offsetTop) {
console.log("up 1");
$("#bg-1").show();
$("#bg-2").hide();
} else {
// console.log('down 1');
$("#bg-2").show();
$("#bg-1").hide();
}
lastScrollTop = elementTarget.offsetTop;
console.log("last", lastScrollTop);
});
</script>
Desired output when scroll:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('img_parallax.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<p>In this example we have turned off parallax scrolling for mobile devices. It works as expected on all desktop screens sizes.</p>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
<div class="parallax"></div>
</body>
</html>
i am trying the image to cover full page.
Vertical scroll : allowed
Horizontal scrolling : disallowed
Image : image must show full page without leaving border and responsive based on device size.
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>
The issues is, it leaving a blank space in all 4 side of the screen. How to fix this?
It may Help you :
*{
padding:0px;
margin:0px;
}
img{
width:100%;
object-fit:cover;
max-width: 100%;
}
You can use the background image property
Check here - W3schools
You have to reset the browser added styles to the body tag by removing the padding and margin from it, feel free to add this at the top of your styles:
body {
padding: 0;
margin: 0;
}
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
If you want the image to cover full page, better use background-image and background-size cover, using this way your aspect ratio is also maintained
html, body {
height: 100%;
}
body {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
Try this
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>
I am trying to load a simple webpage that has an image that covers the entire page background. However, when the page is first loaded, there is a noticeable white flickering for a split second as the image is being loaded. I have already tried suggestions such as but to no effect. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Does anybody have a solution to remove the flickering effect?
You can set .bg with opacity 0, then with jQuery once the page is done loading add a class set with opacity 1.
If you want a "fadein" effect simply add a transition.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 1.3s ease-out;
opacity: 0;
}
.bg.visible{
opacity: 1;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
$('.bg').addClass('visible');
});
});
</script>
</html>
Maybe not the best solution but it works for me.
If you want an image that covers the entire page background, you should directly set it for the <body> element like this:
body {
background-image: url(your_url/your_image.png);
background-position: center; // to center the image
background-repeat: no-repeat; // to not repeat the image
background-size: cover; // to cover the element
background-color: #000; // fallback if the image is not available
}
or with the CSS shorthand more compact:
background: #000 url(your_url/your_image.png) no-repeat center;
background-size: cover;
Is it possible to automatically zoom in an image to a certain position of the image itself?
I think that could be possible even with the animations but i don't figure out how could i get the specific point of the image (and then make it on mobile as well).
I'll make an example to be more explicit:<br
-In the following link i'd like to zoom into the person's eye automatically (no buttons), if you are wondering why it's because i'd like to use something like that as a preloader.
My questions are:
Which method could i use to zoom?
How am i able to indicate (and calculate) that specific point/pixel?
Link of the example:
https://jsfiddle.net/eL1sbotx/
Code: (requested by StackOverFlow[Also found on the link above])
HTML:
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;1,400&display=swap" rel="stylesheet">
<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>Test</title>
</head>
<body>
<div class="preloader">
</div>
</body>
</html>
CSS:
html, body {
max-height: 100%;
max-width: 100%;
overflow-x: hidden;
height: 100%;
width: 100%;
margin: 0;
}
body {
background-color: #000;
color:#fff;
font-family: "Roboto";
}
.preloader{
height:100%;
background-image: url("http://www.freedigitalphotos.net/images/category-images/118.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
So this is my layout for most of my pages:
<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">
<link rel="stylesheet" href="./css/style.css" />
<title>{{title}}</title>
</head>
my css is in a different folder , and some of the css for certain page such like my home looks something like :
.home-banner {
width: 100%;
background-image: url(home-banner6.jpg);
height: 170px;
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Do i just put it like that in .css?
Heres an image of my directory as well.
enter image description here