How to add SVG files to html or CSS? - html

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.

Related

CSS's background-image in Eclipse IDE?

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);
}

external CSS, test on local computer, css file not found

I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}

Background image does not want to load in css

I am creating a website in Django. I downloaded a html homepage template design on the internet that I want to improve upon and use for my website. since its been designed it came with a CSS file. now when I try to make the improvements specifically add a background image in one of the elements. it refuses to do so. the other elements respond to the CSS style but the background image refuses too. since I'm using Django i had to set up the static files and 'collect static' which I did but when I set that those pics to my background image in my CSS it refuses. here is the html file & css.
html
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Home </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<!-- Boxicons CDN Link -->
<link href=
'https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css'
rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<section class="home-section">
<div class="main" >
</div>
the class="main" is where I'm trying to add the background-image too.
CSS
.home-section .main{
background-image: url('https://www.pexels.com/photo/singer-
singing-on-stage-beside-guitar-player-and-bass-player-
167636/');
padding: auto;
margin: auto;
background-size: 50pc;
}
#media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
}
}
I've tried everything but it refuses to acquis. Thanks in advance.
Load Static or have non-empty div
Without knowing what more code you have I can only guess that perhaps you forgot to load static files by including this on the top of your html file:
{% load static %}
Second, until the div is filled with something, it has no dimensions, so the image would occupy no space either.

does notepad++ have a way to connect a way to use an external style.css file.?

I'm new to coding and have only learned how to use HTML and CSS. If I use notepad++ how do I make an external stylesheet?
You can add CSS styles to an HTML document by using the <link> element. It's documentation is here.
Here is a simple example that assumes both files are in the same directory:
styles.css
.my-class {
background-color: red;
}
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<p class="my-class">The background of this paragraph will be red.</p>
</body>
</html>

HTML/CSS: Background image is always relative to paragraph

I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.