I'm trying to achieve color overlay on background images as demonstrated at w3school, but I want to do it for a dynamically set background-image (I'm currently working with VueJS).
What I try to achieve:
<div class="hero-image">...</div>
.hero-image {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.png');
background-size: cover;
}
First attempt - extract background-image to html:
Problem: This will override the color information and only use the background-image settings. I also tried with background attribute instead of background-color in the css code.
<div class="hero-image" :style="{ backgroundImage: `url('${image}')`}">...</div>
.hero-image {
background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-size: cover;
}
Second attempt - extract the complete background attribute:
Problem: This works except the background-size attribute is now ignored. I tried to add cover to the background-attribute in the html but it does not work either.
<div class="hero-image" :style="{
background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>
.hero-image {
background-size: cover;
}
As suggested by Temani, the second attempt should use background-image in the html instead of just background. Solution:
<div class="hero-image" :style="{
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>
.hero-image {
background-size: cover;
}
Related
I'm using Material-UI V4 library to create a React JS app.
I'm using the scrolling long content dialog example here https://v4.mui.com/components/dialogs/#scrolling-long-content.
What I want is to show a soft box-shadow at the top or bottom at the Dialog Content when the Dialog Content is scrolled like these 2 images below:
I found an example using a simple element (written in HTML and CSS) here How do I add a top and bottom shadow while scrolling but only when needed?.
I tried to implement the sample above in my Custom Dialog Content component but it didn't work as expected (no soft box-shadow appeared).
Here is the code for the Custom Dialog Content component:
// MATERIAL UI CORES
import DialogContent from "#material-ui/core/DialogContent";
import { withStyles } from "#material-ui/core/styles";
const CustomDialogContent = withStyles((theme) => ({
root: {
// SCROLLBAR
"&::-webkit-scrollbar": {
width: 5,
height: 5,
backgroundColor: "whitesmokeGray"
},
"&::-webkit-scrollbar-thumb": {
width: 5,
height: 5,
backgroundColor: "darkgray"
},
// SHADOW ON SCROLL
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
backgroundRepeat: "no-repeat",
backgroundColor: "white",
backgroundSize: "100% 40px, 100% 40px, 100% 14px, 100% 14px,",
backgroundAttachment: "local, local, scroll, scroll,"
}
}))(DialogContent);
export default CustomDialogContent;
Here is the full code: https://codesandbox.io/s/long-scroll-dialog-material-ui-ecicb?file=/src/CustomContentDialog.js
So, how can I show a soft box-shadow at the top or bottom at the Custom Dialog Content when the Custom Dialog Content is scrolled.
I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
you need to use background: instead of color:
color - is for text color
Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/
So I was able to create a slideshow using the jquery backstretch.
$.backstretch([
'assets/images/main-01.jpg'
, 'assets/images/main-02.jpg'
, 'assets/images/main-03.jpg'
], {duration: 5000, fade: 850});
However, I wish to add a repeating-linear-gradient effect on the images
background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px);
Is it possible to apply the above css to the backstretch images?
Yes it is possible.
You just need an overlay for the backstretch images:
#backstretch-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent
2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px
);
}
In this fiddle I attached backstretch to a container to have some control over it, but that is not particularly necessary.
you can see me demo:
html {
height: 100%;
overflow-y: hidden;
}
body {
background-image: url('http://dl.dropbox.com/u/515046/www/garfield-interior.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
DEMO
or
You just have to Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage, preferably at the bottom of the page, before the closing `` tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
// You may also attach Backstretch to a block-level element
$(".foo").backstretch("path/to/image.jpg");
// Or, to start a slideshow, just pass in an array of images
$(".foo").backstretch([
"path/to/image.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg"
], {duration: 4000});
</script>
I have an image that is within the div tag. This div has no background color, but I want to add a background color. but when I add background color are disappearing photos.
For example, cc into the div tag when I add background color within the div tag are disappearing photos
Codepen.io DEMO
HTML CODE
<div class="cc">
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
</div>
And CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
.cc {
width:100%;
height:100%;
padding:10px;
}
Digging through your CSS, I came across a z-index: -1. If you specify this, the image will be rendered behind all elements with a higher z-index. Thus it was hidden
EDIT:
Give your .img_400px400px (which has the gradient) a z-index: 1 and your .img_400px400px img a z-index: 2. Then your background color, gradient and image show. See this jsFiddle
I would like to have a liquid background on my website such as the one you can see on this website :
http://www.baliilmare.com/
I used to have done it in the past using FLASH and actionscript 3 but it really seems dated as an option
and the max-width 100% CSS trick doesn't give the same result.
I actually would like to reap the Javascript from this website but am really noob in terms of javascript and would need a tut or maybe someone pointing the right JS/Jquery (I see different .js files used from the source)
I can then google it and see how it works ...
Can someone help ?
Use Firefox or Chrome and right-click->inspect element. It's the fastest way to see what's going on behind a site.
They are using the image as a cover.
HTML:
<div class="coverImg" style="background-image: url(urltoimage); height: 456px; ">
</div>
CSS:
.coverImg {
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
you probably could load the background image into your body tag:
body { background-image: url(/images/thisbackground.jpg);
hope this helps