I am trying to set background image using background-image:url but its not working.
<!doctype html>
<html>
<head>
<title>MyTitle</title>
<style type="text/css">
body{
<!-- background-color:green; -->
background-image:url("background.jpg");
<!-- color:white; -->
}
</style>
</head>
<body>
</body>
</html>
Pls Help!!
<!-- comment -->
is not valid comment syntax within a CSS block. That is probably breaking your CSS rule.
Try
/* comment */
The tag doesn't nest into the tag.
Try
<!doctype html>
<html>
<style type="text/css">
body{
/* background-color:green; */
background-image:url("background.jpg");
/* color:white; */
}
</style>
<head>
<title>MyTitle</title>
</head>
<body>
</body>
</html>
And comments in CSS are defined like...
/*this is a comment*/
Related
I am trying to add logo to the page and failed to load the image to the page
for some reason.
test.css:(/assets/stylesheets)
.logo {
background-image: url("../images/testimage.png") ;
width:124px;
height:95px;
float:left;
margin:0 0 0 0;}
index.gsp:(/grails-apps/views)
<!doctype html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Welcome to Grails</title>
</head>
<body> <div class="logo"></div></body>
</html>
testimage.png (/assets/images/testimage.png)
Its just a small thing and its not working.
Thanks
Pooja
Add test.css to \grails-app\assets\stylesheets\application.css like:
*= require test
I'm trying to use the media attribute for internal style sheet. I am using media=print and media=handheld for mobile devices. However this is not working. Not to sure why?
EDIT: The outcome I am trying to get is, media="print, test text = blue and picture to be static. Media="handheld" , test text= red and picture to be responsive/dynamic.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
It works fine, but you can't test "print" and "handheld" on jsfiddle. (It doesn't accept media-attributes, and you can't define <style media=""> inside the CSS-field.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
I'm trying to add an image in background but I want to use internal CSS and I can't find what's wrong. The font is ok but the background doesn't appear.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body:{font-family: Arial}
body:{background:url("C:\Users\Sonik379\Downloads\backPortfolio.jpg");}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: Arial;
background:url("C:\Users\Sonik379\Downloads\backPortfolio.jpg");
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
There is an issue with the path, you can try this:
<style>body{background:url(file:///C:/Users/Sonik379/Downloads/backPortfolio.jpg);}</style>
ive been watching a tutorial that has told me to change the background color of a webpage by using:
body {background-color:red;}
however when i try and load the page in google chrome the background remains white?
This is my full code:
<!doctype html>
<html> <!--Document START-->
<head> <!--Head START-->
<title>Page Title</title>
<style type="text/css"> <!--CSS START-->
body { background-color:red }
</style>
</head>
<body> <!--Body START-->
<h1>Page Title</h1>
</body>
</html>
The problem is you have an html comment within your css.
<style type="text/css"> <!--CSS START-->
Remove the <!--CSS START--> and it will work fine.
If you want to add comments within css then you can use /* */, e.g:
<style type="text/css">
/* CSS START */
This works for you.
body {
background:red;
}
Ahhh yes, the problem is you have a html comment in the css, so it will not work after: –
Should be:
body { background-color:red; }
(You forgot the ; after "red")