I use ionic 3.
How to add an id to my background?
ion-content {
background-image: url('../assets/imgs/back.png');
background-size: 100%;
background-repeat: no-repeat; }
So I think you're a bit confused, in CSS classes and IDs both act as selectors and can both use the same CSS properties. Meaning it's not usually necessary to have both on an object. There is nothing wrong with having an ID and a class (or multiple classes) it's just not usually necessary.
See this example: https://codepen.io/samandalso/pen/zaPpve
In it we are using an ID and a class on the same div, but you could easily move all of the CSS rules to one or the other and get the same result. The last selector is a child selector, which is saying and div that is a child of a parent with the class "ion-content" give 100px of padding on all four sides and make the color red. Does that help?
/* Individual selectors */
#myID {
background-size: cover;
width: 100vw;
height: 100vh;
}
.ion-content {
background: url(http://via.placeholder.com/100x100) center center;
text-align: center;
}
/* Child selector */
.ion-content div {
color: red;
padding: 100px;
}
Related
I have this style under element.style ( from a third party library)
the css is inside element.style
normally i just change the css by copying the class and adding my own css with !important , but in this scenario , what to put in my css class .
The first approach, specifying a css class with !important should do the job.
However, When the inline style has !important applied to it as well there is no way you can override it. Then javascript (jQuery eventually) comes in play.
Read this answer for further details: Can I override inline !important?
The white arrow seems to come from an image , so you will need to replace it with another image of green arrow.Overall you seem to be on correct path.
element.style {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
.i-am-a-rider-overrider {
background: green url("https://homepages.cae.wisc.edu/~ece533/images/monarch.png") no-repeat center !important;
}
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;"></div>
<div style="background: red url(' https://homepages.cae.wisc.edu/~ece533/images/airplane.png') no-repeat center; height: 300px; width: 300px; display:block; margin:20px;" class="i-am-a-rider-overrider"></div>
This question is very similar to another question, but is not exactly the same in that the code does not have the background shortcut code, but uses the individual rules.
Notes about the layers
Layer 1 is an inline style created by PHP
Layer 2 is my attempt to add the contain value to the layer in the child theme without overriding the PHP.
Layer 3 is the parent theme assigning the cover value to the layer. In Firefox Inspector, the background-size rule shows as being crossed out.
Layer 4 is also part of the parent theme.
element
{
background-image: url(https://montanawebmaster.com/wp-content/uploads/2018/11/Bug.jpg);
}
#masthead .header-image
{
background-size: contain;
}
#masthead .header-image
{
display: block;
width: inherit;
max-width: 100%;
margin: 0 auto;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
.kahuna-cropped-headerimage div.header-image
{
height: 100%;
}
This is affecting several sites using the parent theme, but here is an example: https://montanawebmaster.com/images/why-is-the-wordpress-kahuna-theme-messing-with-my-images/ The bug image in the banner should be contained as opposed to cover.
The issue is the background-attachment: fixed.
You'll need to update your css to:
#masthead .header-image {
background-repeat: no-repeat;
background-attachment: unset;
}
With this new change, you may or may not want to set it back to cover.
I am using using the background-image attribute to assign images to a range of div on my site. However, with background-image attributes, I also need to assign background-size to get it looking right.
This works fine mostly, but I need to change the background-size attribute based on the file type used in the background-image attribute. For example, as standard I want to user background-size: cover; but when the background-image is an SVG I want to use background-size: auto;
Is this possible using CSS attribute selectors? If not, any other solution?
My attempt (SCSS):
&.bg-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 500px;
max-height: 700px;
&[src$=".svg"] { background-size: auto; }
}
If background-image is your only inline CSS property, you can do this:
.bg-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 300px;
max-height: 700px;
}
.bg-image[style^="background-image:"][style$=".svg)"] {
background-size: 103px 94px;
}
<div class="bg-image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg)"></div>
If background-imageis not the only property but it is the last one, you can use this selector: [style$=".svg)"].
Finally, the most general case, for any location of background-image in the style attribute use this selector: [style*=".svg)"].
Even with the loosest selector: [style*=".svg)"] (or jpg, or png...) the only declaration the selector can possibly apply is the background-image.
The other approach is to add data-type=svg or what have you to the divs and then target them in CSS [data-type=svg].
Or you could use img instead, as in your example.
I'm trying to insert recaptcha into a form on my website.
My CSS is overriding the style of the repaptcha widget and making it look awful..
I've narrowed it down to the body div styles below that alter the way recaptcha appears:
#body #content div {
width :960px;
background :transparent url("../images/bg-content-bottom.png");
background-position :center bottom;
background-repeat :no-repeat;
padding-bottom :22px;
}
#body #content div div {
width :860px;
padding :10px 50px 20px 50px;
background :transparent url("../images/bg-content.png");
background-position :center center;
background-repeat :repeat-y;
}
How can i make these stop altering the way the recaptcha appears?
Thank you very much for your time,
James
Using global selectors like this is not good practice for this reason, your div selector is not specific enough and so the styles are being inherited by the captcha code.
See here for some tips on writing better CSS: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
You should be more specific with your style selectors and put classes on your child elements like this:
#body #content .container {
width: 960px;
background: transparent url("../images/bg-content-bottom.png");
background-position: center bottom;
background-repeat: no-repeat;
padding-bottom: 22px;
}
#body #content .container .pageContent {
width: 860px;
padding: 10px 50px 20px 50px;
background: transparent url("../images/bg-content.png");
background-position: center center;
background-repeat: repeat-y;
}
Alternatively, as a quick fix you could overwrite the styles for the captcha, although this is really not an ideal solution as the !important declaration will then cause these to override any further styles to these elements.
#recaptcha_widget_div,
#recaptcha_widget_div div {
width: auto !important;
padding: 0 !important;
background: none !important;
}
#recaptcha_widget_div a {
font-size: 1.0em !important;
}
Use the 'inspect element' feature of your browser to find a unique selector for the recaptcha element. Create a specific css rule for that element, and override the part that is making your display ugly.
Try this css:
#recaptcha_privacy{font-family:helvetica, sans-serif!important;font-size:8pt!important;
#recaptcha_widget_div{padding:0!important;}
The !important may or may not be needed. You can move the recaptcha to the right, to appear where you need it, by adding margin-left to the css for recaptcha_widget_div. However you may have to handle that part differently depending on the width of the user's viewport.
Is it possible to position a sprite icon as a background of an element?
I have a file, "icons.png" which contains several icons. I want to select one of those as a background of an element.
Usually I would use
.sprite {
background: url('imgs/icons.png') no-repeat 0 -21px;
width: 17px;
height: 10px;
} and use this class for a button, etc...
The problem is I have a text input and I want to modify it's placeholder
.First I did this, which works perfectly if the file I use is the icon itself
:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }
But now I want to use a file which contains more icons.
Is it possible to use something like this ?
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }
The problem in the last line of code is that it will select all my image (which of course contains all my icons I want to use on the website), I want to select only a part of that image ( the icon I want to use )
Actually, the sprites are used only as background (or you've to set up some kind of complicated cropping).
What you have to do is to set the size of the element to the same sprite's part that you have to show, and the position of the background equal to the x and y coordinates of the icon in the sprite, starting from the top left.
An example taken from this nice article:
"Item 2" is 116x48, begins at 12px (x coord) and 70px (y coord).
So your element's CSS should be:
.element {
width:116px;
height:48px;
background:url(sprites.png) -12px -70px no-repeat;
}
But, what if your element is taller/wider than the above dimensions? Then, you've to isolate that icon with enough transparent/white space so that the other icons won't show up.
If you look up at Facebook sprites, you'll notice that some of them are very long, some others groupped, some others isolated. You've to adapt the sprite for each situation.
Edit: ok, i got your actual needing.
It's not easy with inputs because you can't use pseudo-elements on it. Here comes a workaround.
Demo
First of all, wrap the input inside a div:
<div class="inputWrapper">
<input type="text" placeholder="placeholder text">
</div>
Then add some CSS:
div.inputWrapper {
position:relative; /* that's important */
float:left; /* or display:inline-block; */
}
div.inputWrapper:after {
background:#000 url(sprites.png) 0 -2px no-repeat; /* adjust background position */
content:" "; /* whitespace needed for the pseudo-element to be displayed */
position:absolute;
top:1px; right:2px; /* some room for the borders */
width:16px; /* icon width */
height:18px; /* icon height */
}
div.inputWrapper input {
padding-right:16px; /* so the text won't go behind the icon */
}
I know it's complicated, but the alternative is to create another http-request ... the choice is yours.
Here's a quick n dirty sample. Basically, just set the background-position attribute of the element's CSS.
<!DOCTYPE html>
<html>
<head>
<script>
var curFrame = 0;
var numFrames = 10;
var animTimer;
function advanceFrame()
{
var hero;
curFrame++;
if (curFrame >= numFrames)
curFrame = 0;
hero = document.getElementById("hero");
var posX = curFrame * -64;
curPos = posX+"px 0";
hero.style.backgroundPosition = curPos; //offsets[curFrame];
}
function myInit()
{
animTimer = setInterval(advanceFrame, 200, false);
}
</script>
<style>
#hero
{ /* image is 638x64 pixels - it has 10 sprites in it, horizontally offset */
background-image: url(http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-00-metablogapi/5545.image_5F00_13D4E783.png);
display: block;
width: 64px;
height: 64px;
}
</style>
</head>
<body onload='myInit();'>
<div id='hero'></div>
</body>
</html>
It's possible, but some things to note:
The placeholder pseudo-class works inconsistently across browsers, e.g. Firefox on the entire input element, Chrome only on line-height.
The placeholder pseudo-class by default adds a opacity layer on top of the original input box.
Background-images on the placeholder pseudo-class need to be "repeated" if the cropped icon is not the first icon on the sprite image.
The default box-sizing for form elements may be different for the rest of the elements, so borders/paddings may change the calculation of the size of your background-image.
I think it's best to keep your sprite a long vertical list of icons, make your placeholder style opaque, use the border-box box model. Also, the icon height dimension should be exactly the height of the available background space. It is also a good idea to keep the background-* properties separate so what you are doing with the sprites becomes clearer and easier to read.
Assuming you have a list of 4 50x50 icons - i.e. a 50x200 image, you can do the following:
input {
box-sizing: border-box; /* keep box-sizing consistent */
width: 200px;
height: 52px; /* compensate 2px for border */
border: 1px solid black;
background-color: blue;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 0; /* assuming you want the icon to "float" right */
background-repeat: repeat-y;
}
::-webkit-input-placeholder {
background-color: yellow;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 50px; /* use second icon in the sprite */
background-repeat: repeat-y;
opacity: 1; /* don't show the underlying input style */
}
Also remember to apply the styles to ::-moz-placeholder and :-ms-input-placeholder
I might be stating the obvious, but have you tried:
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') no-repeat 0 -21px; width: 17px; height: 10px;
}