So I'm trying to color a div part of my html with a background gradient that i got from a color generator but for some reason this code won't work.
I'm following css/html tutorials and i'm replicating what their doing but it's not working out for me when i make my own tweaks. See my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Let's Play</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainbg">this part should have a colored gradient</div>
</body>
</html>
my css is..
<style type ="text/css">
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
</style>
not even a plain background is showing up.. thanks in advance
Remove the <style type ="text/css"> and </style> tags from your CSS file leaving you with:
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
You say that your css is:
<style type ="text/css">...
I think the style tag is causing the issue as I don't see anything wrong with your css code.
This seems to cover just about everything with regards to css3 gradients.
You will definitely want to add:
-moz filter
-ms-filter
-ms-
-o-
etc.
Related
I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.
<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">
for example what I want is ,
if html code is <div class="intro" style="width:500px;height:400px;">
the code for the separate css should be
.intro
{
width:500px;
height:400px;
}
You can write it in your css file as you did in your question
.intro
{
width:500px;
height:400px;
}
But note to use the right class name in your example it would be
<div class="intro-body"> // and not "intro"
.intro-body {
background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body">"</div>
Then in your .html file you have to include the css file. Add the following line in the head section of your html document.
<link rel="stylesheet" href="yourstyle.css">
Note: Be careful at the href attribute it depends on the filestructure you have in your project.
For instance when your index.html file is in the base folder and the css file is in the directory /styles
index.html
styles
yourstyle.css
Then you have to write
<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file
just copy the inline css and paste this code in css with your class sector .intro-body
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body"></div>
I think you have put css in seperate folder so you are having this issue.
After Separating your css, Change url to relative values.
ie. url('img/pic.jpg') to url('./img/pic.jpg')
.intro-body {
width:500px;
height:400px;
background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<body >
<div class="intro-body"></div>
</body>
create separate css file and include your css file to html page as follows.
<link rel="stylesheet" href="mystyle.css">
add your css to that file as shown below.
.intro-body {
/*your css goes here*/
}
if the folder structure is :
FolderProject/css/style.css for the css
FolderProject/index.html for the html
FolderProject/assets/img/
The css file:
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
index.html:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="intro-body">
</div>
</body>
</html>
I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:
<html style="background-color: hsl(27, 72%, 72%);">
Then it works. Does anyone know what might be going on here?
** EDIT **
Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
** UPDATE **
Found the problem. I was missing the semi-colon at the end of the #charset directive before the html style rule. This caused the browser to ignore it. Works fine now.
You could try creating a class like
.html {
background-color: red;
}
and then
<html class="html">
</html>
Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE
Chrome:
Firefox:
IE (trashy browser on win7):
EDIT: I shrunk the body 4 times so I could show it works.
I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad
I am working on a website which uses scales for showing stats.
I have created background gradients for each scale using CSS3 and the HTML5 meter element as in this tutorial:
HTML5-Meter-Shim
It works on all browsers expect Chrome and Opera, which show the default color.
Is this possible in Chrome and Opera, or is there any other solution?
Here's my work:
http://jsfiddle.net/KRnUd/2/
Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:
<!doctype html>
<html lang="en">
<head>
<title>Meter Usage</title>
<style type="text/css">
meter {
display: inline-block;
height: 16px;
width: 200px;
overflow: hidden;
background-color: rgb(237,237,237);
background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
}
</style>
</head>
<body>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
</body>
</html>
Greetings all,
I'm using a gradient background with -webkit-gradient. It's not working on Chrome 8.0.552.224 on Windows 7, but I could swear it was recently working on Chrome-OS X. It's Monday so perhaps I'm missing something obvious, but if so I can't figure it out. I'd appreciate your taking a look. The sample code here will work on Firefox but doesn't display a gradient in Chrome:
Thanks,
-Northk
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient test </title>
<style>
.main-header
{
padding-top: 50px;
min-height: 50px;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main-header">
THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
</div>
</body>
</html>
Seems I just got the syntax wrong. Here's how it should be:
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
Be aware in Chrome 16.0.912.75m still has a small CSS bug/issue when parsing style:
background:-webkit-linear-gradient (top,gray 0,#A0A0A0 100%);
This will not work, because of spaces between -webkit-linear-gradient and start bracket.
Deleting additional spaces will solve the issue as well as minifying CSSs.
Try this
background: -webkit-linear-gradient(#DDDDDD, #ffffff);