I'm trying to add a background image in my ion-content
here is my current code:
ion-content{
--background: none;
background-image: url('/assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
I also tried the following but same thing happened.
ion-content{
--background: url('/assets/images/home-background.png') no-repeat center center / cover;
text-align: center;
}
It is working in browser but when I'm doing ionic cordova run android, the background image is not showing. I also tried to change the url to url('../assets/images/home-background.png'), url('./assets/images/home-background.png') and url('../images/home-background.png') but it's giving me error.
I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image
In this second image, I saw the home-background.png
didn't have the chance to solve this problem using the ionic-content, so what I did is to change the ionic-content to div, and it solve my problem. Working in web and android device.
Open scss file:
ion-content {
background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
background-size: 100%;
}
Try changing the path keep images in main www/assets/img folder and then set
background-image: url('assets/img/home-background.png');
background-image: url('..assets/img/home-background.png');
if u have set path just type ../ or ./ automatically path will suggestion
You can try to change your image url as shown below
ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
this worked for me.
Related
Is there a way where I could change the normal plain buttons on the header like this one? (Image bellow) I have the debut theme and working on Shopify
image
Add this code into your store css file and change class name where you want to apply image on button. Also you have to add button image into your store setting=> files
After that you have to copy image path and put into background-image ="change here image " in css code
<input type="submit" class="button">
button {
background-image: url(https://cdn.shopify.com/s/files/1/1023/3903/files/Capture12345.png?v=1652449658);
background-repeat: no-repeat;
background-size: cover;
}
you can just simply add background:url('image-url') on button
{
background: url('image-url');
background-position: center;
background-color: transparent;
}
so i have my svg image which i want to convert it to icon using Fontello to convert and import it to my nuxt project. but the configuration doesn't seem to work
this is what in my nuxt.config.js file
head: {
css: [
'~/assets/css/main.css',
'~/assets/css/animation.css',
'~/assets/css/fontello.css',
'~/assets/css/fontello-ie7.css',
'~/assets/css/fontello-ie7-codes.css', /*if IE 7 */
],
}
in my html page, i'm using
<i #click="goToChat" class="the-icons demo-icon icon-chat menu ic-menu"></i>
and my css file,
.demo-icon {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: 0.2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
the problem is the css file counldn't read font-family: "fontello"; did i config it wrong?
Stumble on the same issue just tonight and searched how to do it, I tried your config and it works..
Have you also imported the font folder provided by fontello which contains the actual font?
If you open the fontello.css file you will see the #font-face property with url reference to thos font files make sure the url is the right one (easiest solution is to import font and css folder from fontello.zip) so that your assets foolder looks something like that
Assets
- css
- font
- images
I am using Selenium to test the functionality of web page. A Valve appears open or closed by loading the appropriate PNG file . I need to check if valve is open or closed by checking if right PNG file is loaded
How to do that with Selenium . The Xpath remains the same when either of images are loaded
Here is code behind code for that element
Blockquote
<div comp_type="CustomizedComponent" show_function="loadCustomizedComponent" class="server_binding textCenter" style="position: absolute; left: 521px; top: 26px; width: 84px; height: 50px; text-align: center; background-size: 84px 51px; transform: rotate(0deg); background-image: url("img/DD6E3CB1.png"); z-index: 15; background-repeat: no-repeat;" range="129" address="3" type="1" length="1" on_text="" off_text="" id="157235533478328" show_param="157235533478328" degree="0" tag_id="Private Tag" on_image="img/10F9F7E8.png" off_image="img/DD6E3CB1.png" mode="false">
'
Blockquote
Thanks
Try this
string backgroundImg = Driver.FindElement(By.Id("157235533478328")).GetCssValue("background-image");
if (backgroundImg.Contains("DD6E3CB1.png"))
{
//Off image
}
else
{
//On image
}
I use MVC4 and minifying my CSS files, but a div tag that have a background image isn't showing the image in release mode. When I inspect the page with firebug, it says "Failed to load image..."
It works in debug mode, but not in release mode.
What is wrong with my div background images?
The physical path on my project is "\Content\themes\default\images\" and the CSS looks like this:
.headerlogo {
background-image: url('images/logo.png');
background-repeat: no-repeat;
background-size: auto auto;
height: 28px;
width: 127px;
margin-top: 25px;
}
I tested the following:
background-image: url("themes/default/minified/images/logo.png");
It works, but if you create a sample MVC4 internet application and look at it's CSS, the image address is:
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
Why doesn't this work for me?
I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.