I am using the following css to display a background image on a page. However, all I get is a blank white background instead. I've been googling around, but can't figure out what is wrong with what I'm doing... any suggestions?
CSS:
#home_body {
background: url(/resources/images/main_tree.png) no-repeat;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="resources/css/main.css">
</head>
<body id="home_body">
<div>
<h1 class="main_heading">Welcome</h1>
</div>
<div id="home_nav">
<nav>
<ul id="main_menu">
<li>Shop</li>
<li>Gallery</li>
<li>About Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
1) If you copy paste the image URL into your browser does the image display?
2) Encase the CSS class image reference in single quotes.
3) Check your referencing, you're referencing the image from the root as <root>/resources/images/main_tree.png in the CSS but the HTML page is asking for a relative resources/css/main.css CSS file, everything should be root referenced (so all addresses on the page should start with a / ).
4) Check no other classes or CSS rules are being applied to the <body> element and are "overwriting" your background.
5) Try using background-image rather than the background shorthand. But remember to put the no-repeat in a new property:-
background-image: url('/resources/images/main_tree.png');
background-repeat: no-repeat;
#home_body {
background-image: url(/resources/images/main_tree.png) no-repeat;}
change css class to view image
Related
I'm new to HTML and CSS and I'm trying to make a website using springboot but I can't add a background image to it. this is how I'm doing it:
body {
background-image: url(images/background.jpg);
}
I've also tried using src/main/java/images/background.jpg, still doesnt work.
(HTML files are in src/main/resources/templates folder and CSS files in src/main/resources/static folder)
Did i import the image correctly? Thank you for help
This is my HTML code (it's pretty bad, I can't really use it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/style.css" rel="stylesheet">
<title>Catering Ristorazione C.S.L</title>
</head>
<body>
<div>
<h1> <strong><em>Catering Ristorazione C.S.L</em></strong></h1>
<div> <hr>
<a th:href="#{/elencochefs}" >Elenco degli chef</a>
</div>
<div>
<a th:href="#{/elencobuffets}" >Elenco dei buffet</a>
</div>
</hr>
</div>
</body>
</html>
Move your folder images to /src/main/resources/static
Also, you should modify your stylesheet to start the background-url with /.
body {
background-image: url(/images/background.jpg);
}
I'm trying to learn how to add an image with CSS only.
The image path is correct when I put it into my html using an <img> tag.
<img src="C:\img\blue_lines_background.jpg" />
The image appears, but when I use the same image path with CSS nothing happens.
I've seriously tried looking through every tag to try to find an answer. I've tried using different images and checked the properties to see if I had it blocked from view or if there was a security setting blocking it from use, but that wouldn't make sense if it works in HTML but not CSS.
It's the same exact file path in CSS as the one that worked in HTML.
I don't know why it isn't showing up.
CSS
* {
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
h1#logo {
background: url(C:\img\blue_lines_background.jpg);
}
HTML
<!DOCTYPE html>
<head>
<!-- Normalize.css -->
<link rel="stylesheet" type="text/css" href="normalize.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="google.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Fake Google</title>
</head>
<body>
<nav>
<ul>
<li>+You</li>
<li>Gmail</li>
<li>Images</li>
<li>Apps</li>
<li>Sign in</li>
</ul>
</nav>
<h1 id="logo">Google</h1>
<form>
<input type="search">
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feelin' Lucky">
</form>
<p><small>Google.us offered in Français</small></p>
<footer>
<nav>
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>Use Google.com</li>
</ul>
</nav>
</footer>
</body>
</html>
You forgot to add the double quotes in the url() thing:
h1#logo {
background: url("C:\img\blue_lines_background.jpg");
}
I think (and I may be wrong, CSS isn't what I do most of my work in) that you can't use CSS to put in images other than background. CSS controls design rather than content. I think that HTML has a "logo" function that you can use, though I've personally never used it. Just try looking up "HTML logo tag" on Google and there should be a plethora of information there. If I'm wrong, feel free to correct me. This could definitely be a learning experience for me, too.
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
Here is my html code :---------------------------------------------------
<!doctype html>
<html>
<head>
<title>My webpage </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1> My website </h1>
<ul>
<li> Home</li>
<li> page 2 </li>
<li> page 3 </li>
</ul>
<h2> This is my homepage</h2>
<p> All of my homepage content</p>
</body>
</html>
the background is suppose to go red but doesn't ?
css code from another file:
body{
background:#red;
}
When using a named colour you do not need to use a hash, hashes are only used for hexadecimal colours.
In order to change the background to red, use the following code:
background: red;
Or, you can do this (#ff0000 is the hexadecimal code for red):
background: #ff0000;
Named colors do not need hash sign:
body{
background:red;
}
I currently have a css file that I want to link in visual studio. I have included the file in my project yet it is still not working.
I am simply using css to change the body background. Here is my code:
Css - folder: /css/Style.css:
body
{
background-image: url('Images/body-background.jpg');
background-repeat: repeat-x;
}
Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/Style.css" />
</head>
<body>
<div id="header">
</div>
<div id="page-wrap">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<p>Main Content</p>
</div>
<div id="footer">
</div>
</body>
</html>
It all works perfectly when I put the style internally in the head it works perfectly. What's going on?
The link in the css file to your image is relative to the css file.
try
background-image: url('/Images/body-background.jpg');
to get it from root, or
background-image: url('../Images/body-background.jpg');
to get it relative to the css file.
This will work in css file.
body
{
background-image: url('/Images/body-background.jpg');
background-repeat: repeat-x;
}