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
Related
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
Below i mentioned the html and css. but when i open it in browser,css property of background color and other properties not showing anything expect image.
HTML code
<html>
<head>
<title>Home Page One </title>
<meta http-equiv="Content-Type" content="type/html" charset="utf-8" />
<link href="home1.css" type="text/css" />
</head>
<body>
<header class="headerpart">
<img src="images.jpg"/>
</header>
</body>
</html>
CSS Property
body
{
background:#CCCCCC;
color:#000000;
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-style:normal;
margin:0px auto;
}
.headerPart
{
background:#00CCFF;
margin:0px auto;
width:1120px;
height:30px;
}
when i run this html in browser, it shows only the image expect the css propety of background and everthing. when i inspect the html, browser showing the css property not found..
am looking solution for this problem..
CSS Classes are case sensitive. You have class="headerpart" in your html but your CSS says .headerPart with a capitol P. Change one or the other, and you should see the behaviour you want.
Add rel="stylesheet" to your link tag, like following:
<link rel="stylesheet" href="home1.css" type="text/css" />
I can not get a simple CSS to apply to my jsp page. The page displays, but just black on white (no underline). The TOMCAT localhost_access_log shows the GET of the CSS is successful (200).
using Tomcat with directories:
web-apps/myapp
--jsp -- cat_list.jsp
--css -- main.css
--WEB-INF
main.css:
h3 {
background-color: blue;
text-decoration: underline;
}
cat_list.jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Category List</title>
<LINK rel="stylesheet" type="text/css" href="css/main.css" media="screen">
</head>
<body>
<h3> Test Text </h3>
</body>
</html>
What am I missing?
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")
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*/