body {
background-color: #0B0B0B;
background-image:url(resources/body.jpg);
background-repeat:no-repeat;
}
That is my CSS, it won't work when I put it on a style sheet file but it will work when enclosed in a a style tag. I've checked other questions and tried its solutions but none worked for me. Is there anything wrong with that CSS? Here's the body btw:
<body>
<br>
<div id="wrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="resources/Slideshow/AvrilAlbum.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/HTNGU.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/LetMeGo.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/OnTour.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/LetMeGoBuyNow.png" width="583" height="583" id="transparent">
<div><img src="resources/Slideshow/RockNRoll.png" width="583" height="583" id="transparent"></div>
</div>
<div class="controller" id="next"></div>
</div>
</div>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/AvrilLavigne" data-widget-id="436842073010888705">Tweets by #AvrilLavigne</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
Your CSS link should be contained in the head.
<head>
<link rel="stylesheet" type="text/css" href="bodyCSS.css">
</head>
This is when the CSS document is within the same folder as the html document. If your CSS document is outside of the html folders location. Then it needs to be:
<head>
<link rel="stylesheet" type="text/css" href="your/folder/bodyCSS.css">
</head>
And in this case. If your CSS document is in a DIFFERENT folder than your Background Image Folder, it will try to append the image link to the active folder of the html document. So it seems this is a case of misdirection on the background image location.
Do you have this line in between your head tags?
<head>
<link rel="stylesheet" type="text/css" href="YOURCSSFILE.css">
</head
Also, make sure that you are using the relative link to your image.
how is the folder structure setup in accordance with your .css file? Maybe try
background-image:url(../resources/body.jpg);
if the .css file is in a folder that is at the same level as your resources file
You are probably incorrectly linking your style sheet. Perhaps pointing it to the wrong directory. Can I see your head?
Just change your style, when you linking that from file css/style.css.
body {
background-color: #0B0B0B;
background-image:url(../resources/body.jpg);
background-repeat:no-repeat;
}
because here you should use relative url to location resources/body.jpg, resources folder is not in the same level as you style.css.
From style.css you should move one step back by using (../) and then jumps to resources/body.jpg.
Hope by correcting your css,you solve your problem.
Your complete Html page is below, here i am just include head tag and link css file.
<!DOCTYPE html>
<html>
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
sam as your code....
</body>
</html>
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);
}
So as you can see here, I have used image tag to add an SVG that in my github repository, but I am unable to see it, when I turn on the live preview it just shows an image icon in the place of my actual logo, I have also tried to add the file using CSS but it has the same problem.
https://github.com/Alucard2169/Third.git here is the link to my GITHUB repo, as you can see I have put all my media file in side the media folder.
.main_heading::before {
content: url(media/logo.svg);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="media/logo.svg">
</div>
<h1 class="main_heading">
A history of everything you copy
</h1>
<article class="main_content">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<bottoom class="ios">
Download for iOS
</bottoom>
<bottom class="mac">
Download for Mac
</bottom>
</header>
</body>
</html>
When linking a file in css through url(), you have to give ./. This is shown below, but this only works if your html file is outside the media folder.
.main_heading::before {
content: url(./media/logo.svg);
display: block;
}
Your img tag should have a self closing tag like this: <img src="./logo.png" />.
But in this case, both your html and img files should be in same folder.
For an html header, a div box containing elements including a logo, would it be possible to put the logo as well as the colors in the css file? For example:
<html>
<head>
<link rel="stylesheet" href="myurl.css"/>
</head>
<body>
<div class="header">
<div class="header-left>
<img id="logo"/>
</div>
</div>
In the stylesheet, I would like to say
#logo {
src: mylogo.jpg;
}
so that the look and feel is all within the stylesheet. Then to select a different skin, the only thing needed is to switch the stylesheet.
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.
I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}