I'm trying to set the background image of my Windows 8 app. In the CSS for the page I did:
body {
background-image: url("images/logo.png");
background-color: #00522c;
}
The background color works but the images does not.
Assuming you're using what the default template generates, you have a pathing issue (the images directory is not at the same level in the folder hierarchy as the css file)
Try
background-image: url("/images/logo.png");
or if you want to be really explicit:
background-image: url("ms-appx:///images/logo.png");
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
I want to set background color of whole app or a single background color
but what happened if i use div , different device take different height that's why bottom side not cover up and i am unable to set ion content background.
Add below code to your app.scss file :
html, body, ion-app, ion-content, ion-page, ion-view, .nav-decor {
background-color: #yourColor !important;
}
Bro u can use in this case i have a stylesheet global with primary color variable
I am using chart.js lib on a programmable device i need to add an image as background to my chart, if that is not possible how can i change background color to black?. I cannot use Jquery as it is not supported by the Platform.
Thank you
Thank you!
I didn't think to CSS, i added an image too in a similar way
canvas {
background-image: url(backgroundimage.jpg);
}
You can style the canvas element. Something like this will work
canvas {
background-color: black;
}
Fiddle - https://jsfiddle.net/w1yhp03h/
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.
I am trying to put background image in my store.
I edit global.css file I set Performance Force Compilation = true and cache =no.
I change color of body
I put background image
like below
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:#555 url('../img/flowerbg114.gif')repeat
background-size: contain
}
But nothing changes in my front office :(
My img file is under img folder under the selected theme..
Thank you for your time :)
try below CSS
body {
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:url(../img/flowerbg114.gif) #555 repeat;
background-size: contain;
}
After each line you end, or each css property you complete, place ; .
Check it and it will be working fine now.
Thank you
The problem was the theme I was using was probably overriding some of the style changes. I found out that it has a module which helps to set some properties like background picture or store logo. When I use the user interface of that module I managed to change the background easily.
I suggest that you edit header.tpl and change line 40
after {$HOOK_HEADER} </head>
from:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
to:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">
This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.
Note: will override the body tag in global.css.
Make a file name of a page, and then put the pictures inside
Annexation place the file in img Directory