I want to create a CSS background for a HTML5 section and it should look like this:
css triangle:
I have already researched and tried stuff like transform skew or border manipulation. But i can t really achieve the view like i want to.
Is any CSS pro here ? Would be nice.
ps - if a bootstrap solution exists would also help me.
Greets
Tobias
Use a linear-gradient
* {
margin: 0;
psdding: 0;
}
div {
height: 100vh;
width: 100vw;
background-color: blue;
background-image: linear-gradient(10deg, lightblue 50%, transparent 50%), linear-gradient(-60deg, brown 30%, transparent 30%);
}
<div>
</div>
Related
Lately, I've gotten into making CSS art and I noticed something that I don't understand about CSS borders.
If I style an element to be rounded with a transparent background, and set a border on only one side, there's still a faint line on all the other sides that shows up only on mobile.
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
Compare the following CodePen on a PC vs phone to see what I mean:
https://codepen.io/aradevich/pen/mdrLvqx
Screenshot:
ellipse with 5px top border
This effect is particularly bothersome when it skews facial features in CSS art, like with the eyes here on mobile: https://codepen.io/aradevich/pen/qBaxQye?editors=1100
Does anyone know why this happens, and how I can address it?
Thank you!
Here is a different idea to have the same result without the border issue:
div.box {
width: 300px;
height: 150px;
background:
/* 150 = width/2 70 = height/2 - 5px of border */
radial-gradient(151px 70px at bottom, transparent 98%,purple)
top/100% 50% no-repeat;
border-radius: 50% 50% 0 0;
}
<div class="box"></div>
As far I know, maybe it's caused by browser rendering. So, the solution is change the graphic image to SVG or PNG instead of css.
Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading.
I tried something like this but it doesn't work.
body {
height: 100vh;
background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.
CSS:
#container{
height: 100vh;
background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}
body {
background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Page:
<div id="container">
// put page code in here like it was body
</div>
I'm working on a webpage, and I want to give it a background color with a gradient. From purple to light color.
However, the css is not working. If someone can let me know what am I missing and why is not working?
The background color is the same one as in this codepen. https://codepen.io/alexboffey/pen/NAkQLE?limit=all&page=2&q=calculator
Here the developer used scss.
here's the css
$purp: #542437;
$gold: #CDB380;
body {
margin: 0 auto;
height: 100vh;
display: flex;
background: linear-gradient(to bottom right, $purp 0%, $gold 100%) 100% no-repeat;
}
If you put the hex in instead of the $purp and $gold it works. Can it be an issue with sass not compiling properly?
body {
margin: 0 auto;
height: 100vh;
display: flex;
background: linear-gradient(to bottom right, #542437 0%, #CDB380 100%) 100% no-repeat;
}
<body>
</body>
So there's apparently a lot of work you have to do before SCSS will work in a local environment: https://medium.com/#ricardozea/sass-for-beginners-the-friendliest-guide-about-how-to-install-use-sass-on-windows-22ff4a32c1f7. Also, you have to save the CSS file with a .scss extension, I believe.
Here's a fiddle using straight hexadecimal color codes #542437 and #CDB380 in case anyone is curious: https://jsfiddle.net/ss20wh3f/2/
I know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains how to create something more advanced than this image as background in CSS. Any ideas on how to get started?
Not my fiddle, but I found this: http://jsfiddle.net/leaverou/RtGsM/
body {
background:
-moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%),
black;
background:
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%),
black;
background-position: 0 0, 80px 80px;
-webkit-background-size:160px 160px;
-moz-background-size:160px 160px;
background-size:160px 160px;
}
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.