I want to update the background image dynamically using CSS variables.
app-header {
background-color: var(--paper-red-500);
--app-header-background-front-layer: {
background-image: url(var(--profile-cover));
};
}
But it won't update using this approach:
this.customStyle['--profile-cover'] = url;
this.updateStyles();
The app-header element is made from Polymer :)
Any answers?
I got it,
this.customStyle['--profile-cover'] = 'url(\'' + url + '\')'
So basically I have to change the CSS:
background-image: var(--profile-cover);
Related
I previously created a swiper (ngx-swiper-wrapper) and I changed the color of the arrows the following way:
::ng-deep.swiper-button-next::after, ::ng-deep.swiper-button-prev::after {
color: $primary-light;
}
Now I created another one on a different page where the color should be black. The problem is when I visit the page with the first swiper and then I navigate to the other page with the second swiper, the color stays the white.
Is there a better way to change the color or a workaround?
Thanks
I've been running into the same issue, and spent days looking for a better solution, till i found one, it works just fine, no need to change the svg image or somthing just add the code below into your css file :
::ng-deep .swiper-button-next,
::ng-deep .swiper-button-prev {
color: #207868 !important;
}
:root {
--swiper-theme-color: #207868 !important;
}
I tried it and changed a few things and it's working:
::ng-deep .swiper{
.swiper-button-next::after,
.swiper-button-next::after{
color: #207868;
or
--swiper-theme-color: #207868;
}
}
I have a react application in which on checking certain checkboxes I am adding or changing a certain image icon.
.checkbox1:checked ~ .icon-span {
background: url('../../../../assets/images/icon_plus.svg');
}
Which is giving me this:
background: url([object Module]); //invalid property value
But path is correct, how do I correct this?
This should work
.checkbox1:checked ~ .icon-span {
background: url(${require("../../../../assets/images/icon_plus.svg")});
}
on my website there are some hexagon SVG´s with different colors and a normal .content class with some style.
What i want, is if the user :hover over the SVG the background-color of .content should get a "specific" color.
#hexagon4_work:hover .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover ~ .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover > .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover + .content{
background-color: #6EC5D3;
}
I have already searched about it, but i do not found any solution for this.
What i found was these operators. But these affect only for a child in a parent. / or not?
I´d like to only use CSS, so if it is not possible only in CSS, please tell me that too. (I am a noobie in JS so dont wonder.) :)
Thanks for all following answers.
- MK
There is no CSS-only solution for your Problem. Check the comment from David.
But you could do something with JavaScript.
Add this to your code.
var hex4 = document.getElementById('hexagon4_work');
hex4.addEventListener('mouseover', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = '#6EC5D3';
});
hex4.addEventListener('mouseout', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = 'transparent';
});
I tried it on your page and it works. For the other hexagons you should copy this code and modify the selecor in first line and the color in line 4.
My recomendation:
Add the CSS transition: background-color 500ms; to the content div. It would be a nice animation.
While there's no way to do this directly (there are no parent selectors in CSS as of 2017), you can do it by creating a child SPAN, setting z-index and its position to push it behind everything else in the parent, and change its background color (parent background = transparent). Check this out
Sorry if this is a bit of a newby question. I'm trying to create a login page that has a background image, while the rest of my pages do not. I've used ng-style but I can't get the property to update on page changes.
in my index.html:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller:
var image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg";
if ($location.path() === '/login') {
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center center fixed"};
} else{
$scope.bodyStyle={background: ""}
}
Obviously this doesn't work because the function is only called once. I've tried using rootScope, but I can't seem to use rootScope properties in ng-style (and everywhere i look, people are advising against using rootScope for this purpose). How do I create a dynamic background? Also i'd prefer not to use a controller on my body tag, if possible.
update
The main problem i'm having is that the background image does not update when changing paths. The image is set in bodycontroller, and when logging in and changing paths it is not changed.
Per suggestion I could write a service, I've used them before but only through getters and setters, so I assume i can create a service that sends a call to a controller? Looking something like this:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller
var image=??;
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center
some service
.service('backgroundService', function (image) {
var backgroundImage = image
// somhow set bodycontroller image?
});
and then somehow call the service when route is changed? I haven't found a way to inject services into my router config, which is what I think i would need for that.
So i figured out an easy way to do this with some help.
in app.js add this:
.run(function ($rootScope, $location) {
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$rootScope.bodyClass = $location.path().replace('/', '') + '-page';
});
});
and change index to:
<body ng-app="myApp" ng-class="bodyClass">
and Css:
.login-page {
background: url("someImage") no-repeat center center fixed;
}
IMO it would be easier to just toggle an ng-class based on location. So you could do something like -
if ($location.path() === '/login') {
$scope.isLogin = true;
} else{
$scope.isLogin = false;
}
then on the html
<body ng-app="myApp" ng-class="{'customBgClass' : isLogin }" ng-controller="bodyController">
Then just set everything you want on that css class
.customBgClass {
background: url("http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg") no-repeat ce;ter center fixed;
}
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}