I want to create this background in CSS only.
I want to do it with CSS to avoid responsive issues.
You can make use of radial-gradient to produce the glow effect. You can change the colors to be inline with the image.
One thing you should note is the browser support for CSS gradients. IE < 10 do not support them. If you need support for older browsers then CSS gradients would not help.
body {
background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(29, 84, 166) 100%);
height: 100vh;
}
<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
I can't see any extra steps in between but if you are looking for several steps of varying percentages then have a look at the below snippet:
body {
background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(41, 122, 204) 30%, rgb(29, 84, 166) 70%);
height: 100vh;
}
<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Related
hey i need to implement a switch component that is kind of difficult,
i write in React so i will be happy to receive full implementation but if you let me know how to make that
line with the different shades of gray on it, it will be enough.
thank you
the switch component
The easiest way to implement the color gradient of that block, is actually giving a background gradient. You have plenty of Gradient Generators out there, but here is a similar solution.
.progress {
width: 300px;
height: 10px;
background: rgb(237, 237, 237);
background: linear-gradient(90deg, rgba(237, 237, 237, 1) 60%, rgba(148, 148, 148, 1) 100%);
}
<div class="progress"></div>
I am trying to add a background image with a linear gradient.
If I add the image without the linear gradient, the image appears. As soon as I add the linear gradient, neither of them work and it defaults back to the original background color in the section.
In the CSS below I have tried to combine the background image into one CSS declaration and divide it by a comma.
.education {
background: linear-gradient(rgba(141, 153, 174, 0.8), (rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
background-size: cover;
}
<!-- // Education -->
<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>
<!-- School details: copy this whole block to add more schools. -->
<h3>School name 2017 - present</h3>
<p>Designation received</p>
<!-- Add as many paragraphs as you need. -->
<p>Summary.</p>
<!-- End of school details. -->
</div>
</section>
It is definitely :
.education {
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed;
background-size: cover;
}
live solution : https://jsfiddle.net/v47dk902/
You have inserted an extra curly bracket in background css. Kindly replace your background css with the following
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
Thanks
If you're working with transparent background images, you will need to switch the order so the gradient appears beneath the image. You will want to list the image, repeat, and positioning info first, followed by a comma, followed by the gradient info.
So, using the code used above as an example:
.education {
background: url("samuel-beckett-bridge.jpg") no-repeat fixed, linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5));
background-size: cover;
}
I am making a small web based tool, but running into a problem, both background and hr tags break when the page is larger in width then the initial viewable area. In other words, once I scroll sideways!
EDIT: This needs to work for chrome. (Or possibly firefox if not possible in chrome)
Also, thanks to Celts response I can possibly solve the hr issue, background is still not repeating as it should!
However in my real app I don't know the width of the page, as its content and layout are dynamic. (This I could work around with javascript if needed)
Html code for replicating the problem:
And apparently I cant post pictures here yet. So links to the 2 pictures:
Initial view: http://imgur.com/HdHedgk
Scrolled View: http://imgur.com/hh2wgE4
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 100px,
rgba(70, 82, 152, 0.31) 100px,
rgba(70, 82, 152, 0.31) 200px
)
}
<div style="width: 100%; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
Because you are setting the div's width to 100% this means it will only ever be as big as the initial screen size that your page loads on. The hr tag inside the 100% width div it is getting cut off for this reason. To prevent this from happening set your 100% width div to the same size as the one below it.
This code works fine in chrome:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 350px,
rgba(70, 82, 152, 0.31) 350px,
rgba(70, 82, 152, 0.31) 700px
)
}
</style>
</head>
<body>
<div style="width: 4000px; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
</body>
</html>
You should really build your styles into a separate style sheet. It is good practice and will make future maintenance of the web page much easier.
UPDATE:
To solve your repeating background problem you can change your background style to use percentages instead of pixels:
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 10%,
rgba(70, 82, 152, 0.31) 10%,
rgba(70, 82, 152, 0.31) 20%
)
}
</style>
I'm trying to style the default progressbar skin of jquery-ui. Unfortunately I've discovered an issue that is known as "background bleeding". Apparently the solution for this problem is to use:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
However it does not seem to work for me, no matter where I put it. :(
Image of my background bleeding issue (zoomed)
Source:
$(function() {
var myProgressBar = $("#myProgressBar");
myProgressBar.progressbar({
value: 50
});
});
#myProgressBar {
width: 580px;
height: 92px;
border: none;
/* black background */
background-color: black;
background-image: linear-gradient(rgba(255, 255, 255, 0.25) 50%, transparent 50%, transparent);
}
#myProgressBar .ui-widget-header {
/* orange foreground */
background-color: orange;
background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
}
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div id="myProgressBar"></div>
Here is a workaround: I set a smaller border-radius for the inner rectangle (orange bar), to hide the blurry leaking part of the parents (black background) rounded border. I'll mark this question as solved as the workaround is good enough for my purpose. Sadly this issue remains a bug/flaw in CSS.
Edit: Alright, have to wait 2 days before I can actually close it. Please don't delete it again.
body background is defined in inline css as
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
In real web sites latest Internet Explorer shows horizontal lines in background.
In IE developer tools I turned all other styles in body off, tried 2-color gradient, linear gradient and other colors, but problem persists.
How to force IE to show background without horizontal lines ?
Chrome shows proper background. Also Internet explorer shows proper background if only this style is used. Page
<html>
<head>
<style type="text/css">
body {
background: radial-gradient( #EAC39F, #CB690C);
}
</style>
</head><html><body></body></html>
is shown properly. If there are more elements in page, horizontal lines appear.
How to remove those lines in Internet Explorer ?
jquery and jquery-UI are used in page.
Since IE does not apply height to body, either you apply a fixed height to body or you apply a 100% heightto html tag in your CSS,
and if you don't need the background to repeat, apply, background-repeat:no-repeat.
Also If you are looking for a cross-browser support then you should use the vendors browsers.
Here is a snippet working in IE10+:
html {
height: 100%
}
body {
background: rgba(234, 195, 159, 1);
/* Old Browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1)));
/* Chrome, Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* IE 10+ */
background: radial-gradient(ellipse at center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eac39f', endColorstr='#cb680c', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
background-repeat: no-repeat
}
The issue appears to stem from the fact that IE is not applying a height to the body element. As such the background gets repeated and you see the lines.
By applying
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
A similar effect can be seen at http://jsfiddle.net/xpz2tgp9/ in Chrome, IE, etc.
To resolve your issue, apply a specific height to the body element or add a clearing div that will force the body to have height value.
html,body
{
height: 100%;
margin: 0;
padding: 0;
}
See - http://jsfiddle.net/xpz2tgp9/1/