I am trying to tint an image with a transparent linear gradient.
Dev tools say my property is invalid. If I get rid of the gradient, the image shows up fine. Is there something I'm missing?
body {
background: linear-gradient (rgba(255,0,0,0.45),rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
You need to use prefix's for different browsers while using css gradient propery,
check this code.
body {
background: -webkit-linear-gradient(rgba(255,0,0,0.45), rgba(255,0,0,0.45));
font-family: 'Oswald', sans-serif;
font-size: large;
}
This is simply because your markup fails. You have a single space too much. Remove the space between linear-gradient and ( and you will see the issue sorted. I added the working code below, and marked it up to my own preference.
Here's a pen with the working example (and a different image). Try adding the space live in the pen, and see everything disappear again. :)
body {
background:
linear-gradient(
rgba(255,0,0,0.45),
rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
Related
I have two installations of Laravel including Bootstrap.
As far as I can see both include and have Montserrat on the body tag.
One of the installations needs no declaration of that in the app.sass (meaning it gets included with the bootstrap directly).
However, the other needs it, otherwise it defaults to the browser default font.
And yet, even when both installations have the same Montserrat #import-ed, they look different. I suspect the wrong one is really Montserrat, while the right one is some kind of Bootstrap sugar-coating that the other one can't do.
In order to check it out, please follow:
Desired effect: This link and once you log in with maximilian.berbechelov#gmail.com and 123456 click it again. I know it's Cyrillic, but I don't think it matters.
Problematic effect:
This link - no login required.
I have a body font-family declaration in the sass file (the desired one has no such declaration), because without it the font is the browser default.
You can see your font adding !important after the font-family name like this.
body {
margin: 0;
padding: 0 0 50px 0;
min-height: 100vh;
font-family: "Montserrat", sans-serif!important;
background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.1rem;
}
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.
I have investigated as extensively as I can given my coding deficiencies. Currently, I've been editing the styles.css file. I replaced this default code:
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
with this revised code, which I cobbled together with my hazy understanding of CSS.
body {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat; nowhitespace: afterproperty;
background-repeat: repeat;
background-color:rgba(255,255,255,0.0);
font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was 'behind' it). I don't know. I was throwing darts. Maybe it's in the wrong place. Maybe it's just flat out wrong. :)
I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.
Rather than setting the CSS of your body element, try setting it on #main-content
Also, you only need the first line to achieve the effect you want:
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
If you don't want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn't be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.
Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
I have managed to add a custom background to my site. I change the body in the bootstrap.css
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url("../images/norn-race.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
My problem is that it is not responsive, If i zoom in the background gets bigger and if I zoom out the background gets smaller, but it should be always be the same size on different resolutions.
Where is my mistake?
I should also add the background is only visible on the left and right. At the moment I am just using a big background to cover everything, which is unnecessary, because 80% is hidden by my content.
What is the correct approach to show images on the left and right?
responsive image work when your image is in the content, aka as a <img src="" alt="">, not when set as background-image
check background-size property for responsive-design background size
How can I get the Microsoft.AlphaImageLoader to work??
I am trying the following:
.navHeader
{
/*Alpha Loader*/
background-image: none;
background:transparent url('../../../../commondata/sharedimages/summary/NavBox_topMiddle.png');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../commondata/sharedimages/summary/NavBox_topMiddle.png',sizingMethod='scale');
text-align: center;
font-family: Arial, Helvetica, san-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
line-height: 16px;
}
This has no effect on the PNGs (they are not transparent).
I think what you're doing is specifying the background image and then applying the filter over the top of that. You need to NOT specify the background image for IE6, and only apply the filter.
Otherwise you get the background image (without PNG transparency) and then you apply the filter over the top of that - effectively showing two PNGs but only the top one is transparent.
Also, double check your src path for the filter - I believe it works it out differently than CSS url paths (i.e the path is relative to the location of the page, not the CSS file)
I've had so much headache trying to get IE6 PNG support, until I found this: http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's a simple fix, and works well for everything I need. Hopefully it works as well for you!