What is wrong with the css code below:
body {
background-image: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
Have tried following variations also but still not working:
background-image: #000 url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg') repeat;
background-image: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
The background-image property takes a single argument: the URL to the image.
You are confusing it with the background shorthand property, which takes a list of values and applies them to various different full properties (including background-image, background-color and background-repeat).
If you're using background property you can use the color as well as the image together, but if you're using background-image property you can't use the color with the image, you're to use only the image, than for the color you're to use separate property, something as follows:
body {
background-color: #000;
background-image: url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
}
or both the properties combined in single background property as follows
body {
background: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
}
Use only background property:
body {
background: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
Jsfiddle - example
Remove #000 and repeat :)
body {
background-image: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg);
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
JSFiddle
First you need to get rid of repeat. and add this after
background-repeat:repeat-y;
Then make sure that the url are in single quotes.
body {
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
background-repeat:repeat-y;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
Related
The styles.css file I used to use has this body stanza:
body {
font: 18px Helvetica, sans-serif, Arial;
color: #ffffff;
background: url("../images/bg.jpg") center top repeat-x;
background-size: cover;
line-height: 20px;
}
and it displays that gradient color both locally and on the Web.
I want to replace the gradient with a solid medium blue color so I modified the body stanza to this:
body {
font: 18px Helvetica, sans-serif, Arial;
color: #ffffff;
background-color: #00008B;
background-size: cover;
line-height: 20px;
}
This works when I view my web site locally, but on the Web the body background-color is white so no text can be seen.
Why might changing from body background using an image to body background-color using a hex code display differently on the Web?
Just use the background property to set the hex color
body {
font: 18px Helvetica, sans-serif, Arial;
color: #ffffff;
background-color: #00008B;
background-size: cover;
line-height: 20px;
background: blue;
}
I would like to set an overlay on my site:
When I play around with the color in the inspect window, I can make it work in the element style like this:
element.style {
background-color: rgba(0,0,0,0.4);
}
I tried to add the line background-color: rgba(0,0,0,0.4); , in my body css, but it is not working. Should it not be on the body element?
<html>
<head>
</head>
<body>
</body>
</html>
body {
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
If you're talking about overlaying color on your bg img then the rgba needs to be in the same css block as the img
body {
background-image: bgimg.jpg;
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
When I specify the font in body style in CSS it works ok. But when I do the same for div it has no effect.
.tel {
display: inline-block;
background-color:rgba(0,0,0,0.5);
height: 60px;
padding: 30px 30px 0 0;
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: cover;
}
The problem was that i needed to use styling like this
.tel a{
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
color: white;
padding: 0 0 0 50px;
}
try with !important and see if it has an effect, if so, an other class is applied on your DIV.
I'm building a basic website and I've gotten pretty far, but I have stumbled upon a problem: I want all of my headings to be in the font "Arvo", but for some reason, only the index page has Arvo in the heading. Since all of my pages are linked to the stylesheet I should be able to change every h1 to this font.
Here's what my style sheet looks like, there's probably some unnecessary code in there, but I'm a total beginner.
body {
background: url("https://www.xmple.com/wallpaper/streaks-lines-red-stripes-1920x1080-c4-7f2a33-972c36-b02c39-cb2b3b-l4-45-72-116-187-a-135-f-1.svg") center center repeat;
margin: 0;
padding: 0;
background-attachment: fixed;
}
#wrap {
width: 54%;
margin: auto;
background: #fff2f9;
overflow: hidden;
padding: 15px;
}
div {
width: 300px;
height: 2000px;
background-color: white;
box-shadow: inset 0 100px 100px #ffffff, 0 10px 15px #000;
}
p {
color: black;
}
h1 {
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 70px;
}
p {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
}
b {
font-family: "verdana", sans-serif; color: gold;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
a {
font-family: "verdana", sans-serif;
color: black /* unvisited link */
}
/* visited link */
a:visited {
color: black;
}
/* mouse over link */
a:hover {
color: gold;
}
/* selected link */
a:active {
color: black;
}
}
What else do I need to do for the font to change on all of my HTML pages?
Maybe the style is override, therefore use !important to fix it.
Use the following CSS for all headings:
h1, h2, h3, h4, h5, h6 {
font-family: Arvo, Georgia, Times, serif !important;
font-size: 59px;
line-height: 70px;
}
If you want to apply it only for h1 then remove the rest of headings. In the question you said "all headings", therefore, I added the all heading levels.
Update:
Try linking the font with your page, put the following inside head element:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arvo" />
Or
Import the font. Put the following line in the very begining of your CSS:
#import url('href="//fonts.googleapis.com/css?family=Arvo');
The body of my CSS has a font style set using CSS, but it is not showing in the table. I then added it into the table and it still seems to not want to adopt the font style.
I had a look through some other posts and am still struggling.
CSS:
body {
font-family: 'Indie Flower', cursive;
background-image: url('../images/Landscape.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
min-width: 100%;
min-height: 100%;
}
table, th, td {
font-family: 'Indie Flower', cursive;
}
table {
margin-top: -446px;
margin-right: 428px;
z-index: 1;
position: absolute, center;
background-color: #F0F0F0;
border: 3px solid #FFF;
}
th {
text-align: left;
z-index: 3;
}
td {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
z-index: 2;
background-color: #F0F0F0;
}
Ok so your issue here is that the font is needed for the placeholders, not the table or inputs themselves.
::-webkit-input-placeholder {
font-family: 'Indie Flower', cursive;
}
:-moz-placeholder { /* Firefox 18- */
font-family: 'Indie Flower', cursive;
}
::-moz-placeholder { /* Firefox 19+ */
font-family: 'Indie Flower', cursive;
}
:-ms-input-placeholder {
font-family: 'Indie Flower', cursive;
}
Then for text that is entered into the inputs, just add the style to the input itself.
input {
font-family: 'Indie Flower', cursive;
}
Worth noting that you can also use font-family: inherit; instead of explicitly declaring the font multiple times. This makes it much easier to update if you decide to change fonts.
Updated Fiddle
You have to put the font-family inside your input like this :
input{
font-family:inherit;
}
and if you want for the button too :
button{
font-family:inherit;
}
FIDDLE