Below is my code for my situation.
Currently the background image just gets smaller as I scroll out. I don't want it to repeat; I just want it to stay in place as I scroll out.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("/img/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
You may need background-size:cover in the body
Use This Code
Use this in Body
background-size: cover;
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url("/img/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
Related
I used this code painted all items on body, I need only image on the body background
$fondo: url(/grid/assets/img/backimage.png);
{ padding: 0; margin: 0; } body { ::before{
content:"" ; height: 1008px; width: 100%; display: flex; position: absolute;
background-image: $fondo ; background-repeat: no-repeat ; background-position:
center; background-size: cover; filter: blur(1.6rem);
}
}
Try this way
$fondo: url(/grid/assets/img/backimage.png);
body {
padding: 0; margin: 0;
&::before{
content:"" ;
height: 1008px;
width: 100%;
display: flex;
position: absolute;
background-image: $fondo;
background-repeat: no-repeat;
background-position: center;
background-size: cover; filter: blur(1.6rem);
}
}
Here is the link to the example: https://imgur.com/a/sN2lwDK.
And the css for it:
.login-container {
position: fixed;
height: 100%;
width: 100%;
background: url("../../storage/assets/nave.jpeg") no-repeat center center fixed;
background-size: cover;
.login-form {
left: 0;
right: 0;
width: 520px;
max-width: 100%;
padding: 35px 35px 15px 35px;
margin: 305px auto;
background-color:white;
height: auto;
position: fixed;
border-radius: 4px;
}
}
When I am trying to zoom in, the image remain fixed, but the form keep going down is that the intended behavior?
I've been trying to get a full screen background in the header tag but for some reason it doesnt show?
Code
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header></header>
You are missing height:100% in header but even so it won't display because this a child of body and html you need to give height:100% and width:100% to parents (body/html)
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
Another approach is using 100vh
body{
margin: 0;
}
header {
position: relative;
width: 100%;
height: 100vh;
text-align: center;
color: #fff;
background: url(//placehold.it/500) center / cover;
}
<header></header>
so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}
if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis
Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I created a static bar with the code:
#header_bar {
background-image: url(../img/background_white.png);
height: 64px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
top: 0;
position: fixed;
}
And my code for my content:
#content {
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #D8F0DA;
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-image: url(../img/wallpaper.jpg);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
It worked and my header bar became static but when I scroll down the header bar stays behind my contents. How can I fix this?
Try add a z-index to the header bar's CSS class:
position: fixed;
z-index: 100;
Should make it appear on top of content.