My background image doesn't scroll in Chrome or Opera (in Windows only). When I reach the bottom of the page it jumps a couple of pixels up, when I reach the top, again a couple of pixels down. Otherwise during scrolling the image stays put. In Chrome in Ubuntu it's wroking fine. Weird...
Tried putting the image in the HTML and BODY tags.
body {
background-image: url("images/flag_background_300.jpg");
/*background must be separate from gradient, otherwise the gradient repeats vertically if background-size is set*/
background-size: 178px 100px;
background-attachment:scroll;
}
.wrapper {
background: linear-gradient(to bottom, transparent 150px, rgba(143, 143, 143, 0.7) 400px, rgba(143, 143, 143, 0.98) 100%);
}
The gradient in the .wrapper scrolls fine. See my website
Related
i am having issues with my background image. Somehow on big screen the head is cut off to fit the screen. Is there a way to ensure that 100% of the picture is always rendered regardless of size of the screen?
initial property of background-size is cover but when set this way the top of the image is cut to fit the container. When i change background-size to 100% 100% as per below i get the result i want but the quality of the image is impacted. Is there a way to work around this. I have reviews most documentation related to background-image but none of them give me the result i want.
both html and body height/width are set to 100%.
Thanks in advance for the help.
Leo
.main .masthead {
min-height: 100%;
padding-top: 7.5rem;
padding-bottom: 7.5rem;
text-align: center;
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: 100% 100%;
z-index: 1;
width: 100vw;
}
sandbox
You should use cover or auto in media query so it will cover the whole area as per screen size.
background-repeat:no-repeat;
background-size:cover;
To fit the background image to fit the screen size we could set the background-size property to contain. On setting the background-size to contain; it tells the browser that the image scales to fit the content area without losing its aspect ratio
For more understanding refer the link provided:
https://www.bitdegree.org/learn/responsive-image#setting-background-size-to-fit-screen
It is best to have the following settings in your main CSS file to delete all surrounding spaces by default
body,
::after,
::before {
box-sizing: border-box !important;
padding: 0px !important;
margin: 0px !important;
}
Then consider the following styles for the body:
body {
background-repeat: no-repeat;
background-size: cover;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))),
url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%),
url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
}
If your image deteriorates, download your image and use Photoshop or other tools to maintain image quality.
This question already has answers here:
Three horizontal stripes in CSS
(1 answer)
Body background with 3 background colors
(2 answers)
Closed 1 year ago.
Is there a way to have 3 different horizontal colors of different sizes on a webpage using CSS?
I am creating a webpage for a club and am hoping to make it stand out more with a contrasting white and black background.
I want it to look like this with no fading between colors:
I have tried this code. However, the height of the color only covers a small amount of the page.
body {
height: 100vh
width: 100vw;
background-image: linear-gradient(white 10%, black 50%, white 40%);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0px;
}
From the image you've provided, it seems to be working as expected. The first section of the gradient is white, the middle is black and the third section is white. If you want to make sure the gradient fills the entire page and flows with the viewport, you can use background-attachment.
Give the <body> a background-attachment value of fixed. This will make the background-image position fixed within the viewport. I updated the linear-gradient usage so the colors don't fade between sections by utilizing color-stop points. This is achieved by defining a starting and ending position for the gradient line. Each section in the gradient doesn't flow into it's neighboring color but shows a sharp distinction between colors.
body {
min-height: 100vh;
height: 100%;
width: 100vw;
background-image: linear-gradient(to bottom, red 10%, green 10% 60%, blue 60%);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
}
<body>
<div></div>
</body>
Here you go:
html {
height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 65%, rgba(255, 255, 255, 1) 65%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient</title>
</head>
<body>
</body>
</html>
The solution is to mitigate the gradient effect, which is pretty weird since that's what they are used for. We need to tell linear-gradient that the black starts exactly after the white ends, and it ends exactly before the white starts.
I usually use this site to design gradients: https://cssgradient.io
It's super neat and contains well-written references and samples.
Add steps to remove color escalation
body {
height: 100vh;
width: 100vw;
margin: 0px;
background: linear-gradient(
to bottom,
white 0,
white 10%,
black 10%,
black 60%,
white 60%,
white 100%
);
}
<body>
</body>
I'm trying to centre an image with a linear gradient. But the image either disappears or the gradient shifts.
I've tried using float: left; putting the image in a div container in an Html file then adding a gradient but if I do that the gradient doesn't show.
width:750px;
height: 1300px;
background: linear-gradient(to top,black,transparent 30%), url(/images/ian-dooley-iD5aVJFCXJg-unsplash-750x1300.jpg) no-repeat;
I hope to be able to centre or move around my image on my website while maintaining the gradient overlay.
Any help would be appreciated
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
Also see the link, this will surely help you
http://jsfiddle.net/ExpertSystem/yyvT3/
I have the following code my background so that the image is slightly opaque.
div#home {
background-size: cover;
color: #404040;
background-image: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg);
}
However I want it to be fixed. I tried using background-attachment but that doesn't work on iOS Safari so i was looking for alternatives and come across:
background: url(/img.png) no-repeat center center fixed
I am trying to implement that so it works with my opacity bit like:
div#home {
background-size: cover;
color: #404040;
background: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg) no-repeat center center fixed;
}
However that zooms my image in a lot more than it should be.
The site is accessible at: http://www.shivampaw.com/
Thanks
Note, it is best to set background-size after background-image.
You have also to reset it when background-image is reset or updated elsewhere (via a class or id )
From your question, I was not too sure i understand your issue, but if with the gradient you had an issue and not without it, you may use an inset shadow instead :
html {
height:100%;
background:url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover;
/*box-shadow:inset 0 0 0 3000px rgba(0,0,0,0.225);*/
box-shadow:inset 50vh 100vw rgba(0,0,0,0.45);
}
body {/* make html scroll */
height:200%;
}
or set background-size for both bg :
html {
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%) 0 0 scroll no-repeat, url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
background-size:cover, cover;
}
body {
/* make html scroll */
height: 200%;
}
Just add background-size: cover; at the end(after the background is set) and your code should work fine.
By default you have background-size:initial. The initial keyword is used to set a CSS property to its default value.
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image.
I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?
JSFiddle: http://jsfiddle.net/2faSt/
CSS:
.grid {
position: absolute;
width: 100%;
height: 500px;
background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
background-size: 111px 21px;
}
If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.
Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel
And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))
See this fiddle
There, you have this CSS:
#one {
background: linear-gradient(90deg, #e3e4e5, transparent);
}
#two {
background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}
In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning.
As a comparison, in the second you can see what probably you intended, make the transition to white transparent.