I'm new at this so I'm sure I'm just missing something. I can't get the background image to show up. I tried all different paths and also tried just copying the image address of a web background to see if that would work.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>REDACTED</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="logo">
<h1>REDACTED</h1>
<p>Aspiring Web Developer</p>
</div>
<nav>
<ul>
<li class="selected">About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<img src="img/julie.png">
<h2>About Me</h2>
<p>REDACTED</p>
</main>
</body>
</html>
And here's the body CSS:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
In your hierarchy, you are trying to go back one directory and then go to img/geometry.png, this is the issue, because when you link the css file in your html, you don't need to use '../', you can access directly img folder!
Try this:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('img/geometry.png');
}
And don't forget to put geometry.png inside the img folder!
As a #MarcosPerezGude noted, make sure your paths match your directory structure (or possibly visa versa in this case). With what you have provided this is what your directory structure and files should look like:
/index.html
/css
/style.css
/normalize.css
/img
/geometry.png
And as others have pointed out, the following:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
needs to be in in style.css or normalize.css with the directory structure given above.
Related
I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.
I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.
You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
I have a view page (View.cshtml) and a stylesheet (Style.css).
The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">
When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?
UPDATE:
View.cshtml
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" />
<title>Test Page</title>
</head>
<body>
<div id="topHeader">
<br />
<div id="credentialsBox">
<div id="texts">
<div id="word1">Username:</div>
<div id="word2">Password:</div>
</div>
</div>
</div>
</body>
Style.css
#font-face {
font-family: 'proximanova';
src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}
/*CSS Styling Properties*/
body {
font-family: proximanova;
margin: 0;
background-color: #007381;
}
#topHeader{
margin-top: 15%;
height: 450px;
background-color: #d6d6d6;
}
#credentialsBox {
border-radius: 3%;
width: 20%;
margin: auto;
margin-top: -5%;
background-color: #ffffff;
}
#texts {
padding: 14%;
text-align: center;
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
#RenderSection("css", false)
</head>
<body>
#RenderBody()
</body>
</html>
Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D
You can also use #Url.Content instead for absolute path of css file.
<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />
If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Style.css));
And in your head section try to replace
<head>
#RenderSection("css", false)
</head>
with
<head>
#Styles.Render("~/Content/css")
</head>
and see it will make any difference, and we will go from there.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
Here is a sample of my code:
<!doctype HTML>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="C:/Users/OneDrive/Programming/HTML/css/test.css">
</head>
<body>
<h1>This is a heading.</h1>
<p1>This is a paragraph.</p1>
<ul>
<li>This is the first element of a list</li>
<li>This is the second one.</li>
</ul>
<button type="button" onclick="alert('That tickles...')">Press me!</button><br>
<button type="button" onclick="">I do nothing. :-(</button>
</body>
</html>
What the situation is my CSS file...
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
... is located in the following way:
HTML/
..../home.html
..../css/
......../test.css
I've tried to access the css via href="css/test.css" but to no avail. What am I doing wrong?
P.S. Any optimisations to my code?
This is correct:
<link rel="stylesheet" type="text/css" href="css/test.css">
But in your code isn't any p tag only p1. So replace this:
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
With this:
p1 {
font-family: Courier New;
color: white;
background-color: lightblue;
}
(Sorry for my english. I'm from czech republic)
When you are accessing local files, you have to specify the file URI scheme (file:///):
<link rel="stylesheet" href="file:///C:/Users/OneDrive/Programming/HTML/css/test.css">
or use a relative path:
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" type="text/css" href="/css/test.css">
I would say check the spelling of the filename of your actual css file. Make sure it actually is test.css and not tst.css or tesy.css or some other typo. Check the folder name for typos too.
If your css file is somewhere inside your project folder just like your HMTL file I'm guessing a typo has to be the issue. For example, if your project structure looks like this
yourProjectFolder
||
||_ index.html
|
|__ stylesFolder
|
|_ test.css
Your script would have to look like this
<link rel="stylesheet" type="text/css" href="stylesFolder/test.css">
If this is indeed the way you're targeting your file and you're getting errors you have to be spelling something wrong somewhere along the way.
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.