I have a gradient background in my website, which basically divides it into two colors horizontally:
Here's the CSS:
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(top, #f57171 0px, #f57171 600px, #FFFFFF 600px, #FFFFFF 100%);
}
This works fine, but if the contents of my website increases and I have to scroll down, the white color of the background won't go all the way to the end of the website. It should go from 600px to 100%, but it just stops.
Any ideas?
Thanks.
You are setting the html to 100% height, which is just the screen height. Try setting both html and body to min-height:100%;.
jsFiddle example.
Also, 600px is an arbitrary point, I would do 50% or something.
Related
I want my background-image to follow the shape of its element. Like if I set my element's clip-path to:
clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%);
I want the background-image to change its size and aspect-ratio to match the element's clip-path.
Everything I try crops the background image instead of reshaping, stretching or squeezing it..
You may use background-size and eventually set some coordonates of your clip-path into css var() so it can be used by background-size:
here an example from your clip-path
html {
background:green;
--clipRight: 50%;/* value setting how far from left you clip the element */
}
body {
margin:0;
min-height:100vh;/* min-height because demo has no content to fill and stretch body */
clip-path: polygon(0 0, var(--clipRight) 10%, var(--clipRight) 90%, 0% 100%);
background:url(https://dummyimage.com/300) 0 0 / var(--clipRight) 100% no-repeat yellow;
}
Note that you might also need to set a different background to html and body to be sure your resized image is drawn on body and not transfered and drawn on html.
I rely on the using a wrapper to center most of my sites ala:
.wrapper {
margin:auto;
max-width: xxxpx;
}
Keeps things centered perfectly, BUT also clears the margins, which is causing my problems as I want to use a clip-path background to create a simple polygon background, which needs to go through the margins, like:
.wrapper {
background-color: #ebeef2;
clip-path: polygon(0 10%, 37% 0, 100% 10%, 100% 90%, 63% 100%, 0 90%);
}
How can I get all of the elements of my page centered without clearing the margins?
Every solution I've tried ends up with impossible to manage page centering of elements, or a cleared page margin.
Here is the full bleed clip path I want.
Here is the problem.
Here are codepens: no margin, margin with busted clip-path
I need to create a linear gradient like this Gradient requirement
I am trying to achieve it with css like this:
background: linear-gradient(-60deg,
rgba(255,183,107,1) 0%,
rgba(255,167,61,1) 15%,
rgba(255,124,0,1) 15%,
rgba(255,127,4,1) 100%);
This works for a specific height, but as the height of the div changes the shape of gradient changes as shown here Issue when height of div increases or decreases.
I want that the gradient should always touch the top right corner of div.
Any help is highly appreciated
You can code it like below:
.box {
height:100px;
background:
linear-gradient(to bottom right,#0000 50%,rgba(255,183,107,1) 50.1%)
top right /1000px 1730px no-repeat /* 1.73 = tan(60deg) */
rgba(255,127,4,1);
/* resize and see the result*/
resize:both;
overflow:hidden;
}
<div class="box"></div>
I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew.
This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top,
Only think i knew it has to some thing with background image, linear gradient, background size, and background-position
Please have look and try to take me out of my misery.
HTML CODE
<ul><li>Home</li> </ul>
css code
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
If any body want to have link here is link as well.
https://codepen.io/arif_suhail_123/pen/jLPYOB
I've annotated your styles below to hopefully explain what is happening.
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
Background Position
If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.
Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.
Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.
Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.
So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.
When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.
Does that help?
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.