Not too sure why, but it is showing up as a blank screen.
How it looks:
Here is my file structure:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
I’m hungry
Show me more
</div>
</header>
</head>
<body>
</body>
</html>
I guess you are looking for this in wrong directory, beacuse your style is already in "resources/css/". Try to continue this directory by doing this:
header{
background-image: url("./images/hero.jpg");
}
You need to wrap the soure in quotes like this
background-image: url("./resources/css/images/hero.jpg");
Related
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
Here's my code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeWare</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="hero">
<h1>Coding</h1
<h1>Redefined.</h1>
</div>
</body>
</html>
Styles.css:
:root {
--color-Primary: #ff0505;
}
html {
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.hero {
background-color: var(--color-Primary);
height: 50rem;
}
h1 {
padding-left: 2rem;
padding-top: 2rem;
color: #ffffff;
margin-top: 0px;
font-size: 9rem;
font-weight: 700;
}
In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me
You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)
You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.
All you need to do is to include normalize.css first.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
css causes some red boxes that cannot be understood.
Chrome/80.0.3987.149 Linux x86_64
code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/b.css">
<style>
/* aaaaaaaaaa */
</style>
</head>
<body>
<style>
*:not(body):not(p) {
color: red;
font: 18px serif;
height: 100px;
width: 100px;
overflow: auto;
display: block;
border: 1px red solid;
}
</style>
</body>
</html>
demo:
https://stackblitz.com/edit/js-z6wf15?file=index.html
Is this a bug?
"special" doesn't have any defined meaning in HTML or CSS terms.
*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.
I am new with HTML and I am trying to center the H1 using css class but it is not working. I
My HTML is the following :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class='title'>
<h1>Technologies</h1>
</div>
</body>
</html>
and my CSS is the following :
multi-input {
display: inline-block;
margin: 0 20px 20px 0;
}
button {
background-color: #eee;
border: 1px solid #ddd;
font-size: 16px;
height: 30px;
margin: 0 10px 20px 0;
}
body > div {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
margin: 0 20px 20px 0;
}
div.title {
text-align: center;
}
I inspired myself from this tutorial : https://www.w3schools.com/cssref/pr_text_text-align.ASP
I also tried adding this h1 {text-align: center;} in my css so that all H1s would be centered but it is still not working.
Can anyone help? Thanks!
You have to delete the Slash (/) from <link rel="stylesheet" href="/style.css">
like this : <link rel="stylesheet" href="style.css">
<!--not this but u can delete u slice and u css will work again-->
<link type="stylesheet" href="/style.css">
<!--NOT .div title but u can try this in u html-->
<div class="title">
<h1>This Title</h1>
<style>
.title h1{
text-align:center;
}
</style>
</div>
<!--THANKS,greetings from Indonesia-->
Try this if you want to center your h1:
<style>
h1 {text-align: center;}
</style>
As the title suggests, my style.css isn't loading.
This is the head section off my html code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caculator</title>
<style type="text/css" src="style.css"></style>
</head>
This is the first part off my style.css:
button {
font-size: 50pt;
font-family: Arial, Helvetica, sans-serif;
color: grey;
border-radius: 7pt;
border: 1pt solid grey;
background-color: lightgrey;
width: 54pt;
height: 70pt;
margin: 2pt;
}
Does anyone know why this isn't working?
Edit: all my files are in the same folder, no subfolders
Try using <link href="style.css" rel="stylesheet"> instead of <style type="text/css" src="style.css"></style>.
add this to your head tag
<link rel="stylesheet" href="style.css" />
instead of
the link tag currently in yout html
Stylesheet import method try.
Sample: https://www.w3schools.com/tags/att_link_rel.asp
<link rel="stylesheet" type="text/css" href="style.css">