recently I switched from Ionic v3 to v4.
In v3 was easier to add a background image,but in v4 is not working.
:host {
.background-image {
background: url('../assets/imgs/carp.jpg') no-repeat 100% 100%;
}
}
<ion-content class="background-image" no-scroll padding>
</ion-content>
and is giving an error for the image url
After asking the question to the Ionic forum I find the solution for this.The problem was that the path was not correct.Ionic 4 has different method for adding the background image.Here is the solution:
:host {
.background-image {
--background: url('../../assets/gifs/nature.gif') 0 0/100% 100% no-repeat ;
}
}
Have you tried with --background ?
The assets directory path is wrong. Try
:host {
.background-image {
background: url('assets/imgs/carp.jpg') no-repeat 100% 100%;
}
}
Related
Trying to update style so that buttons are rendered with capitalised case instead of all uppercase.
vue --version is 3.5.5
Added src/stylus/main.styl
$button-text-transform = 'capitalize'
#require '~vuetify/src/stylus/app'
main.js includes:
import "./stylus/main.styl"
Problem is that the text in buttons is still uppercase:
Chrome inspect shows style:
.v-btn {
text-transform: uppercase;
}
Is there anything else I need to do for the app to pickup the styl?
EDIT:
Changed main.styl to:
#import '~vuetify/src/stylus/app'
$button-text-transform = 'capitalize'
#import '~vuetify/src/stylus/main'
Still all uppercase
In the end after investigating webpack and vue-cli all I was able to do was add to App.vue:
<style>
.v-btn {
text-transform: none;
}
</style>
As noted in the documentation, I changed the base route in order to serve the assets in the right way, doing it like so:
const config = {
// Changes the website's base to work on Github pages
routerBase: process.env.NODE_ENV == 'gh_pages' ? '/my-app/' : '/'
};
module.exports = {
router: {
base: config.routerBase
}
}
With a background picture in index.vue in the pages folder displayed like so:
.home {
background: url('/background.jpg') no-repeat bottom fixed;
background-size: cover;
color: white;
}
Therefore the path should be /my-app/background.jpg, but the image is not displayed as if it tried to find it following the route /.
What am I doing wrong? Please note that the index.html deployed from the dist folder contains the right base like so: <base href="/my-app/">
Changing the url path to ~/static/background.jpg solved the issue, odd when I'm trying to access a static asset from the static folder, where /background.jpg should have been enough.
I installed question2answer on my mac and i login by Safari and ask a question, after posted the question, i view the question, there is a strange line in the content:
next_pages_container { width: 5px; hight: 5px; position: absolute; top: -100px; left: -100px; z-index: 2147483647 !important; } test question
but it works fine if i use Chrome.
I think this code line is a css code, i don't know why it's display in the content.
Anybody can help me? thanks.
Apparently, it is a bug in "Evernote Web Clipper" for Safari:
http://discussion.evernote.com/topic/26375-help-clipper-injects-clearly-html-into-my-pages/
The clipper inserts the code in all editable areas. The suggested workaround is to disable the clipper.
I configuring standart badge on https://developers.google.com/+/plugins/badge/config
For it Google+ rendering iframe content.
How i can change classes styles inside iframe?
At this time it seems there is currently no way to do it. I tried editing the CSS to get rid of the annoying border and white background:
.yeb {
background-color: none !important;
border: 0px solid gainsboro !important;
}
But since the CSS is in the Google server you can't override the iFrame. It is a current feature request in the Google forums.
You can do a little trick:
The HTML for the iframe:
<div id="social_gplus_circle">
<div id="social_gplus_circle_inner"><g:plus href="https://plus.google.com/105379671042990608528" size="smallbadge"></g:plus></div>
</div>
The CSS for the trick:
#social_gplus_circle{overflow: hidden;width: 105px;height: 45px;padding-top: 7px;}
#social_gplus_circle_inner{overflow: hidden;position: relative;top: -20px;left: -130px;height: 50px;width: 276px;}
iframe{display: block!important;}
I did not made this myself, I got it from a google forum.
You can't change it , because the google plus code is not on your server.
You can only modify the iframe CSS , if your page and the iframe code is on the same server.
I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I'm building.
I'm testing the site in the Opera Mini 6 Simulator on the official Opera website, and Modernizr detects that the browser supports background-size and adds the class 'backgroundsize' to the <html> element accordingly.
However when I then use the background-size property in my CSS it is not supported.
Here's the head:
<script src="modernizr.js" type="text/javascript"></script>
<style>
body {
background:url('background.gif') no-repeat 0 0 #FFF;
}
.backgroundsize body {
-o-background-size: 100% auto;
background-size: 100% auto;
}
</style>
And the body content
<p>Content</p>
<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}
</script>
I am expecting the single background image to be stretched across the full width of the browser, instead it repeats; the page can be seen here - http://so.ajcw.com/mobile.htm
I guess one of five things has happened - does anyone know the reason and can offer a solution?
Modernizr does not work properly and has given a false positive
Opera Mini 6 incorrectly tells Modernizr it supports background-size when it doen't
The simulator is not an accurate emulation and the real Opera Mini does support background-size
I have written my code incorrectly
Or something else?
background-size is not supported in Opera Mini
I wrote this as a quick work around:
var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
var root = document.documentElement;
root.className += " opera-mini";
}
It add's a class "opera-mini" to the html element. Therefore you can target Opera Mini. An example below:
.icon {
background-image: url("icon-social.svg");
background-size: 32px;
}
html.opera-mini .icon,
html.no-svg .icon {
background-image: url("icon-social.png");
}
See more at: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf
It seems things have changed. For my Opera Mini 7.5 on Android.
Modernizr.backgroundsize == true;
And it responds correctly to percentage values as well as to cover and contain.
#anthony's answer doesn't work as it's not resetting / removing the background-size property for Opera Mini. The correct way to do this is:
.class {
-o-background-size:cover;
-background-size:cover;
}
x:-o-prefocus, .class {
-o-background-size:;
background-size:;
}
The x:-o-prefocus targets just Opera browsers.