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>
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>
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;
}
I am trying to create a website that scrolls horizontally with a fixed character in the centre, similar to http://www.rleonardi.com/interactive-resume/.
When trying to change the css to resize the images it doesnt affect the website and I dont know if I need to use the position:fixed to fix the character in the centre.
background
floor
character
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Your title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background>
<character><img src="Photos/Character.png" alt= "Background image"/> </character>
<div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div>
</body>
and css:
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
For a complex project like this you're really going to have to wrap your head around the positioning of elements and how fixed/relative and absolute positioning work. This should set you on the right track. In this case I used chrome inspector to have a look at the example that you are trying to replicate and I can see that the character has position: absolute. Here's some css with the character resized. Hope it helps!
body{
background-color: $primarycolour;
max-width: 8000px;
max-height: auto;
}
background{
max-height: auto;
max-width: 100%;
}
character{
max-height: 20px;
margin: auto;
}
background img {
width: 100%;
}
floor img {
width: 100%;
position: fixed;
bottom: 0;
}
character img {
position: absolute;
width: 200px;
bottom: 140px;
left: calc(50% - 100px);
}
I am trying to make jQuery dynamically change the background image by pulling the src attribute from the image tag (img#backSwitch) on the page (which i will make randomly pull from an array in php later), and change the div.background-image element's background-image property value to whatever the src attribute's value is. my console.log is working just fine, i would like to think what i am doing in jQuery is fine as well, but clearly I'm doing something wrong or overlooking a mistake that isn't showing an error. Any help would be great!
Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="background-image"></div>
<div class="content">
<img src="img/ped4.jpg" id="backSwitch" alt="Pedestal" />
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/js.js"></script>
</body>
</html>
HERE IS MY jQuery
(function() {
var backSwitch = $('#backSwitch').attr('src'),
theURL = 'http://staging.youknowphabo.com/';
$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+');'});
console.log(theURL+backSwitch);
})();
HERE IS MY CSS
#import url(//fonts.googleapis.com/css?family=Roboto+Slab:400);
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content {
position: relative;
z-index: 999;
}
.content img {
width: 100%;
max-width: 600px;
padding: 30px;
display: block;
text-align: center;
margin: 0 auto;
}
I think the problem is a typo:
$('.background-image').css({backgroundImage: 'url('+theURL+backSwitch+')'});
Try removing the semicolon from the CSS url property.
You could also write it like this:
$('.background-image').css({'background-image': 'url('+theURL+backSwitch+')'});
Placed popup mask in page. its showing white space while rotating mobile screen for a second.
please find the sample,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
html, body {
margin: 0px;
padding: 0px;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
.skMask {
height: 1500px;
width: 100%;
opacity: 0.9;
background-color: #000000;
}
</style>
</head>
<body>
<div class="skMask"></div>
</body>
</html>
i have tried using backface-visibility option. but still its showing on rotate.