So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
Related
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}
I want to use a gradient throughout the page (top to bottom) but my current gradient completes halfway down the page where my text div ends and then starts again...
You can see it at codepen.io: https://codepen.io/pprunesquallor/pen/zwapGQ?editors=1100
My codepen uses Bootstrap 4, if that's of any relevance.
I hope I don't need to paste the entire HTML/CSS as there's already quite a lot of it. Here's just the gradient part:
body {
background: #00001e;
background: -webkit-linear-gradient(to top, #F5981F , #5D82B3);
background: linear-gradient(to top, #F5981F , #5D82B3);
Your body does currently not spread to the full page height but rather depends its size on its content height. To achieve a fully stretched background you might consider adding height:100% to you html element.
Furthermore, a background-attachment: fixed in your body CSS helps to fix errors on small browser windows.
Is it possible to set a linear gradient to the part of the background of <html> element that is typically off screen and out of viewport, but can be "brought in to view" momentarily by trying to scroll past the limit in any of the 4 directions?
I am trying to make the color outside the viewport match my site color. This way, when the user is at top of page and tries to scroll higher, on some browsers, the space that is shown and is typically white will match the color of my site.
I want to do the same thing for the bottom of site if user tries to scroll past bottom.
If I set element's background-color to red, this works perfectly, and all the white color outside viewport, top f page, bottom of page, as well as left and right, will now be painted red instead of default white.
Problem is, my header and footer are different colors, so I need to use a linear-gradient. When I use a gradient, for example:
background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));
background: linear-gradient(#f8593a, #000) no-repeat;
it simply doesn't show up.
Am I doing something wrong, or is this simply not possible?
UPDATE
Test Case jsFiddle
Best I can do in a jsFiddle. (PS: if someone knows of a way to create a fiddle like this without jsFiddle's panels, so the actual Chrome pulling down can be tested, please suggest.)
The difference between this example and live behavior is that in the example, you can't drag the iFrame window past its boundary, thereby revealing that `out of viewport part of .' However, the blue background-color here should represent that same area here. And as can be seen, the color goes to that area without any extra work, while the linear-gradient is treated as an image and stays within some bounds.
In trying to finalize the layout for my blog, I am having one issue I cant seem to get past. I have two different backgrounds that I want to use for my blog. One of the backgrounds is used just for the header of the blog. The other background I want to add is for the rest. I have been trying to find a way to get my body background to repeat after so much spacing with little luck.
If there is a way to have a background repeat-y after a certain position that would be perfect. But that doesn't seem possible from my searches. If there is another way to accomplish this, it would be very helpful.
This is the site I am trying to edit.
As you can see, the header has the proper background, but I cant figure a way to get that background everywhere else. For clarification, the background header has a blue background under the home/search buttons, so that is why I cant just have one repeating header.
I just made a few edits to my site, and I got to to look very close to how I want. I did more of a quick fix that is "good enough". I just made the header background repeat, and it looks pretty good for the most part. The only problem with it now is that the blue bar that is part of the header sometimes shows up at the bottom of the screen, which is okay I guess. If anyone has a better solution I would love to hear it.
When you specify "repeat-y" then there is no posibility as far as I know to make the background begin repeating after some coordinate.
However, since you have 2 different backgrounds, you don't need to.
Just specify the non repeating background first, and with the adequate dimensions; it will hide the other
This CSS
.test1 {
background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
background-position: 0px 0px, 0px 0px;
background-size: 100% 100px, 100% 50px;
background-repeat: no-repeat, repeat-y;
}
produces a black & red top, followed by a repeating pattern of yellow stripes
demo
It is not clear from your example if this is enough; if not you would need another background, between the first and the second, to hide the amount of the repeating background needed
According to QuirksMode, defining multiple backgrounds works in (at least) IE9, Chrome and Firefox 3.6.
I have the following CSS:
background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
That's quite a complex background, but it's to make a "Dark World" background effect for my online game. Essentially it's three different "ground" layers, a gradient sky, two "edges" to sort of fade out the ground near the sides of the screen, and lightning. Older browsers should see only the "dark sky" gradient background.
The resulting effect should be: Screenshot.
Now on to the problem: IE9 displays this effect perfectly, and can even do the optional "animated background" effect where the ground layers scroll in parallax fashion and the lightning flashes and distorts with CSS transforms. Firefox 6 and Chrome 13, however, display only the fallback gradient-only background.
Does anyone have any idea why this happens?
To answer my own question, neither Chrome nor Firefox support more than two values in background-position. Makes me wonder how they would place a background image relative to the lower-right corner...
The original answer is quite old, so I thought I'd add a solution for anybody coming to this page. You can set multiple background positions, just like you can set multiple backgrounds.
Although I'm not sure if support existed when the question was first asked.
It appears that support is pretty stable now. http://caniuse.com/#feat=multibackgrounds
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
You separate the background positions by comma, in the order they are defined in background-image