We can add a vaadin 14 grid row stripes with the following code.
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
But it shows background-image in even row and white in odd row. I can see below css:
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
I want to reverse the color, ie. white in even row and background-image in odd row. How can I achieve it? I tried the following css, but it does not work:
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
Thanks in advance.
I think you need to override the existing background image on the even rows as well.
So you can do something like this
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
background-image: none !important;
background-repeat: repeat-x;
}
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
Note that these styles should be placed in a style sheet that targets the shadow dom of the Grid. If you are using the custom-themeing mechanism, then the above styles should be placed under frontend/themes/<custom-theme-name>/components/vaadin-grid.css.
Related
Simple thing. I need to use my own background for LoginOverlay in Vaadin 23.
I tried crazy magic with stuff like this
vaadin-login-overlay-wrapper
vaadin-login-backdrop-wrapper
and it did not work.
Create a file vaadin-login-overlay-wrapper.css in frontend/<your theme>/components
Then you can set the background image
:host [part="brand"] {
background-image: url("images/login-banner.jpg");
background-size: cover;
background-position-x: center;
}
#hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') 50% 0 repeat
}
Here is my code but still doesn't work
Without more information (some HTML to go with it) or a webpage you are having trouble with, it is very hard to understand what you are trying to accomplish.
I would try something like this, as it sounds like you are trying to have the background image repeat.
hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') repeat;
}
https://www.w3schools.com/cssref/css3_pr_background.asp
Try this, But you need to add this to your header.php or any PHP file header section. This will not work in CSS file.For more details visit URL
<style>
.hero {
background-image: url("<?php echo content_url(); ?>/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg") 50% 0 repeat;
}
</style>
Hope this will help you.
Just navigate up a directory or two using ../
hero {
background: url('../../img/hero-bg.jpg') repeat;
}
I am assuming hero is your class name thats why prefixed with .
In your code I could not find . , so check the same one more time.This also can be one issue if it is not there in your code.
Can you try this way:
.hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg');
background-size: 50% 0;
background-repeat: repeat;
}
I'm writing a browser game and need help with sass and background images.
I have a world with terrain (grass, water) and entities (player, monster). This is rendered in a big html table and each td gets data-attributes assigned.
<td data-y="5" data-x="23" data-terr="1" class=""></td>
<td data-y="5" data-x="24" data-terr="0" class="player"></td>
Based on those attributes the css then applies the correct images.
table td {
padding: 0;
background-size: 100% 100%;
image-rendering: pixelated;
&[data-terr="0"] {
background-color: #060;
background-image: url(#{$spritedir}/grass.png);
}
&[data-terr="1"] {
background-color: #666;
background-image: url(#{$spritedir}/water.png);
}
&.player {
background-image: url(#{$spritedir}/hero.png);
}
}
Now the problem is that the field where the player class is applied, the player overrides the background-image and the terrain vanishes.
But i want to stack the images. Like this:
background-image: url(#{$spritedir}/grass.png),
url(#{$spritedir}/hero.png);
Is this possible with css/sass? I mean without listing every terrain/entity combination.
I'm having issues locating where in the css I have to modify to change a solid background colour to a transparent.
I have managed to assign a transparent background to the side menu but can't seem to modify the background color on the header menu the div id = GKTOP.
www.optusselect.com.au
You had this style applied to it, therefore, it was being given a background image:
body.solidBg #gkHeader, body.solidBg .ie8mode #gkHeader {
background: transparent url('../images/style2/header_bg_solid.jpg') no-repeat 0 0;
}
Therefore, you could fix this by changing the above to:
body.solidBg .ie8mode #gkHeader {
background: transparent url('../images/style2/header_bg_solid.jpg') no-repeat 0 0;
}
OR
Simply overwrite it by adding this style to your CSS:
body.solidBg #gkHeader {
background:transparent;
}
I have got set in CSS that some image is background, and when it is over with I want to repeat or I want to continue with other image
something like this:
ul.smenu .menu_tlacidlo:hover {
background:url(images/sluzby_menu_btn_hover_2.png);
background-repeat: "url(images/sluzby_menu_btn_line.png)";
width:142px;
height: 22px;
}
Is there way to do it?