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.
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>
Is there a way to use linear-gradient background which is starting from the center / middle of the screen?
This is my current css:
body {
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: 800px;
background: blue;
background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
background: linear-gradient(to left, black, blue, blue, black 800px);
}
Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.
Maybe something like the next line exists?
background: linear-gradient(to sides, blue, black 400px);
So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides.
400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.
If i understand your request correctly, this is what you want:
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-image: linear-gradient(to right, black, blue 400px, black 800px);
background-size: 800px 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
}
Try something like this
background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);
Using percentages ensures your page will scale, and you'll have the left and right quarters of your screen black with the middle half solid blue!
I have a "right" gradient that I'm trying to position it so that it stops 20px from the bottom of my div. Meaning, the gradient flows from left to right but the bottom 20 pixels of my div I would like it to be white.
I've tried the positioning code below and it has worked without the image but I can't get it to work with the image.
If you look at the image, you can see what I'm trying to do here. Any help would be greatly appreciated.
height: 200px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -webkit-linear-gradient(left,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -o-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader1.jpg"), -moz-linear-gradient(right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-image: url("http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png"), linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) no-repeat 0px -20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
This is how it would work but neither the image or the gradient have any transparency so in the example they will cover each other up in every which order you place them :
http://codepen.io/anon/pen/OPKKMO?editors=010
div {
height: 200px;
background: -webkit-linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background: linear-gradient(to right,#24a2b5,#24a2b5,#24a2b5,white,white,white) top left / 100% calc(100% - 20px), url(http://www.vovoaki.com/wp-content/uploads/2015/04/vovoakiheader.png) top left / 100% 100%;
background-repeat: no-repeat;
}
I've reversed the placement here otherwise the gradient wouldn't be visible at all. Just focused on the it's height so the other dimensions may be off from what would be intended.
Just add a div around that, and set the CSS to
padding-bottom:20px;
So you have
<div class="paddingBTM"><div class="gradient"></div></div>
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
I have this code above and i just realized that this gradient goes from top to bottom. Is there any way to make it stop the whole gradient after 30px. I can make adjustments as necessary, but how do you get the gradients to complete itself after 30px?
You can use the background-size property together.
like this:
div {
height: 100px;
width: 100px;
border: 1px solid black;
background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
background-size: auto 30px;
background-position: top;
}
<div></div>
In CSS3:
radial-gradient(ellipse at center center,
rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px,
rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)
You can have multiple stops in the gradient. You can also specify length in pixels rather than percentages. You can also use rgba to make transparent colours.
You start with your first colour at 0%, the center.
Then you have the second colour at x pixels (I'm using x=100 pixels here).
Then you go to transparent white at x+1 pixels.
And stay transparent all the way until 100%.
this should work in browsers that support CSS3.
css3 gradients are background images so they will fill the entire height and width of the block element, just as if it were a solid color.
In order to limit the height of the gradient, limit the height of the element. A "clean" way to do this might be to use a pseudo element. Something like...
div {height: 500px; width: 500px; position: relative}
div:before {
content: " ";
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
background-image: [your-gradient-here]
}
Well, as long as the rest of the gradient (after your set number of pixels) can be a fixed color, just use three color stops as follows (this e.g. stops at 30px - notice the last entry is identical to the second):
background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);