Would anyone know why css is not working in my html? It is linked to my html, but not working. It is also showing empty in chrome inspect - css tab. I see that css is linking , but not sure why it is not working.. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quierra Marriott</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px
font-family: 'Roboto', sans-serif;
color: #eee;``
}
body {
width: 100%;
height: 100%;
background: url() no-repeat center fixed;
background-size: cover;
}
Your css is invalid:
html {
font-size: 10px /* You're missing a semi-colon here*/
color: #eee;`` /* You don't need the strings `` here...*/
...
It may be of interest to you to find a tool like w3c css validator: https://jigsaw.w3.org/css-validator/.
Missing semicolon and empty string are problem but they are only affecting font-size property of html selector.
If your intention was to add background to body then you should fill image url
body {
width: 100%;
height: 100%;
background: url('http://image-url.com/image') no-repeat center fixed;
background-size: cover;
}
These is main reason for empty page
Didn't see any 'body' tag in your HTML that's why I think it's not working
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"
Okay I can't comment on any other questions that's why I am posting a new question.
I've tried all solutions suggested in this answer, this as well.
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
Pretty simple right? But for some reason the background image just refuses to show up.
I have tried with my CSS, HTML, and image in the same folder with no success. Tried in different sub-directories, no success.
I have checked file name, extension and all of that stuff. Tried without quotes and what not. Tried different images even. Tried removing all other CSS files as well, nothing works.
You have a few too many stops in your style property. Your css should look like this:
.parallax {
background-image: url('../pics/parallax.jpg');
...
}
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../
height: 100%;
width:100%; //and try add width
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You can try add base tag for example like this
<!doctype html>
<html>
<head>
<base href="http://YourSite.com/">
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
I have a question or two about floating headers.
Currently, I'm working with two CSS files, bootstrap.min.css and main.css, the latter being a custom file, containing the following
* {
margin: 0;
padding: 0;
}
#heading {
padding: 0;
margin: 0;
border: 0;
background-color: #acc7dc;
height: 10%;
width: 100%;
z-index: 10;
position: fixed;
font-family: 'Merriweather', serif;
text-align: center;
}
which to the best of my understanding should start the heading block at the very top of the screen. However, sometimes when testing the HTML, there is a whitespace between the top of the screen and the header.
The HTML is structured like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/main.css" >
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<title>Trial</title>
</head>
<body>
<div id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
</body>
</html>
I don't modify this behaviour anywhere else. Any ideas what the problem might be?
Since you are using Bootstrap you could utilize the .navbar-fixed-top class, that should correct for the gap . If you want to apply your own custom styes to the header, you would just need to apply both the class and the id styling:
<div class='navbar-fixed-top' id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
I am teaching myself css and html and I created a stylesheet and broke it up into different elements (background image, cursors, etc). I am referencing the entire css file in the main html file but when I run the application I get a blank screen. What am I missing? Here is my code. First, the stylesheet
html, body
{
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background
{
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor
{
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Destiny Saga</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
Here is what you probably meant:
html, body {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background {<--It is Bad to name an ID background... you probably want to just do div here...-->
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor { <---you could just add cursor to the above so that it will be like that in the above div-->
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
</head>
<body>
<div id="background">
<h1> Hello World</h1>
<div id="mycursor">
</div>
</div>
<script type="text/javascript" src="./Javascript/Main.js"></script>
</body>
</html>
Things that are certainly wrong:
The img element is missing a src attribute
The #mycursor selector matches an element with id="mycursor" and you have id="#mycursor"
The #background ruleset doesn't match any element
You might have other issues (such as incorrect URLs).
In short, there is nothing in your HTML that should create a visible effect, and none of the styles that apply to it will change that.
Change:
<img id="#mycursor">
to:
<img id="mycursor">
In css you use # for ids, but in html you dont have to write the #
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: