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;
}
Related
I've read the articles on the specificity of Bootstrap being greater than my custom CSS.
However, I want to add a background colour to the entire HTML page.
When I create a custom style in the following fashion:
.backgroundClass {
background-image: linear-gradient(to bottom right, rgba(51, 102, 255, 0.3), rgba(51, 102, 255, 0.5));
background-size: cover;
background-repeat: no-repeat;
}
and then add it to my HTML tag in Html
<HTML lang="en" class="backgroundClass">
Only "parts" of the website is showing that background colour.
When I inspect elements they have their own colour of #fff, i.e. white, due to bootstrap.
Any workarounds or solutions??
you can do it by applying !important tag in your CSS file as shown below.
.backgroundClass {
background-image: linear-gradient(to bottom right, rgba(51, 102, 255, 0.3), rgba(51, 102, 255, 0.5)) !important;
background-size: cover;
background-repeat: no-repeat;
}
!important will overwrite browser CSS and will give preference to your CSS.
I am having issues getting this to work, for context I am making a simple stat tracking website and .body-bg-image is for my home page.
I want a gradient for my background, not a solid color, so I tried to do that as you can see below. It does show the gradient but does not show the image anymore.
.body-bg-image {
background: linear-gradient(
to top,
rgba(196, 145, 2, 1) 0%,
rgba(149, 48, 54, 1) 87%
)
fixed,
/* this image doesn't show,
it works if I have the background as a color but not as a gradient */
url("./assets/apexrevanant.png") top center no-repeat;
}
It used to work when it was like this, just a solid primary color and the image:
.body-bg-image {
background: var(--primary-color) url("./assets/apexrevanant.png") top center no-repeat;
}
With the background shorthand, order matters.
Linear gradient adds an overlay to the image if the image is declared after the gradient. As you have solid colors, it won't be visible.
If you set the colors to a lower opacity you should be able to see it:
body {
height: 100vh;
background: linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed, url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat;
background-size: auto 100%;
}
If you want the image in front of the gradient reverse the order they are declared in:
body {
height: 100vh;
background: url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat, linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed;
background-size: auto 100%;
}
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 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>
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>