So I'm trying to create a 'parallax' effect. However, the only way I've seen is to use a div and set it to fixed and not repeat. The only problem is that the image has a 'border' around it, on top and the sides. I'm thinking this is because of the div, any clever solutions?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo parallax effect</title>
<style>
.parallax {
/* The image used */
background-image: url("macbook.jpeg");
/* Set a specific height */
min-height: 410px;
/* max-width: 100%;*/
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color: aliceblue;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Remove the margins from the body:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo parallax effect</title>
<style>
.parallax {
/* The image used */
background-image: url("http://placekitten.com/410");
/* Set a specific height */
min-height: 410px;
/* max-width: 100%;*/
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
padding: 0px 0px 0px 0px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color: aliceblue;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Try removing the margins from the body tag in your CSS.
Here's a working example:
body {
margin: 0;
}
.parallax {
background-image: url("macbook.jpeg");
min-height: 410px;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
just remove the margin of body hope it will work please check the following code snippet
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo parallax effect</title>
<style>
body {
margin: 0 !important;
}
.parallax {
/* The image used */
background-image: url("macbook.jpeg");
/* Set a specific height */
min-height: 410px;
/* max-width: 100%; */
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
padding: 0px;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color: aliceblue;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Related
I have a background image that I need to be at the bottom of the entire page is the following:
.background-div {
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
background-image: url('./assets/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: 40%;
}
but in a view there is a moment that a data fetch is made that occupies half of the view and the background is left in half I do not know how to solve it when I place 100vh if the content is a lot it is cut, and if I put 100% it is cut in half while fetching the data
You can make full page image like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.background-div {
/* The image used */
background-image: url("assets/pattern.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="background-div"></div>
</body>
</html>
(source: https://www.w3schools.com/howto/howto_css_full_page.asp)
I am making a website and I stumbled upon a little problem.
I have the image set to be to height: 100% and width; and background-size: cover;
Is there any way I can make the footer appear so that you scroll UNDER the image?
.bg {
/* The image used */
background-image: url("./Resources/home_bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>
It sounds like you only need to add a z-index to your divs.
The footer would have the smaller number z-index, while .bg is the larger one.
Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.
.bg {
/* The image used */
background-image: url("http://placehold.it/400x400");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 10;
}
footer {
background: #ff0000;
position: fixed;
bottom: 0;
width: 100%;
z-index: 8;
}
.container {
height: 105vh;
}
<div class="container">
<div class="bg">BG</div>
<footer>footer</footer>
</div>
The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.
I don't know if the problem is in the css or the html file.
body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Because you set background-image for two element (html and body). A simple webpage layout like this:
<html>
<head>
</head>
<body>
</body>
</html>
You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.
body{
margin: 0;
padding: 0;
background-image: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
add this media code
#media screen and (max-width:500px){
body, html {
background-size:100% 100%;
}
}
You don't need to set bckgound for html and body. Only set the background for body.
body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
I am trying to set an image as a background, but it doesn't fit at mobiles:
Is there another way to make it without changing wallpapers with a #media attribute?
My HTML and CSS:
body {
/* Location of the image */
background-image: url(../img/background.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<h1>ALOOOU</h1>
</body>
</html>
Add a viewport height to your body for mobile like this:
#media (max-width: 768px) {
body {
height:100vh;
}
}
Try using it as a full width background on the html tag:
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;
}
body tag only to 100x100px .this img tag full of window.
body {
height: 100px;
width: 100px;
/* normal body */
}
.CanvasImg {
background-position: center center;
background-attachment: fixed;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
background: url("http://sendeyim.net/uploads/resim-galerisi/3d-masaustu-resimler_468650.jpg") no-repeat;
background-size: cover !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !impoertant;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<img src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
class="CanvasImg"/>
<h1>ALOOOU</h1>
</body>
</html>
use css:
body{height:100vh;
box-sizing:border-box;
overflow-y:hidden;}
CSS3 gives us viewport-relative units:
vh is relative to 1% of the height of the viewport ,using 100vh will cover the full screen.
using overflow-y
hidden will remove horizontal scrolling
border-box indicates that the width and height properties (and
min/max properties) includes content, padding and border, but not
the margin
I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div.
Would you please help me to remove it?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>first</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/first.css" rel="stylesheet">
<style>
body{
background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
background-size:100%;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="content">Lorem Ipsum is simply dummy text of </div>
</body>
</html>
.cover{
height: 1232px;
width: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
.content{
width: 100%;
height: 100%;
background: gray;
margin: 0;
padding: 0;
}
You need to make the body and the html go to the bottom of the page:
body, html {
min-height: 100%;
}
and then set the background to background-size: cover;: https://css-tricks.com/perfect-full-page-background-image/
You could do something like this:
<div id="yourdiv"></div>
#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope it helps!
Sounds like it's probably due to your background image not filling the full space available.
Try adding this to the body (the element with the BG image);
background-size:cover;
Note that this will not work well on old browsers