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>
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"
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
The following base.html code is not implementing the gradient background from the css file that is in the same folder.
base.html:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" text="text/css" href="templates/css/style.css">
</head>
<body>
<h1>hi</h1>
</body>
</html>
style.css:
body {
background: linear-gradient(to bottom, #faaca8, #ddd6f3);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
If this is not working, the problem is going to be the fact that you are referring to a different directory than you are wanting for the style.css folder. If it's in the same folder, please change the href in the link to href="style.css".
This is assuming you have one folder with the base.html and in the SAME folder, there is also the style.css stylesheet .
If it's based on the root directory, you would use /style.css , or on the folder before, ../foldername/style.css. For more, read here.
text="text/css" should read type="text/css"
Put the css codes inside the body tag or you can do it like this
body {
background: linear-gradient(to bottom, #faaca8, #ddd6f3);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<h1>hi</h1>
</body>
</html>
enter image description here
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/cycle2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css">
</head>
<body>
The stylesheet:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
...
I am using notepad++ and I have saved my CSS file in the notepad++ documents file as cssforsliding.css and I believe I have linked my HTML and CSS correctly but it doesn't seem to be working!
Help would be greatly appreciated.
EDIT: Sorry I should have been clearer: the CSS part in my question is the CSS for an EXTERNAL CSS file. So I actually want to link my HTML to an EXTERNAL CSS file.
EDIT2: I have moved my css file inside another folder within the folder where my HTML (and CSS) is located and specify that folder in my HTML and now it works strangely! Thanks everyone :)
enter image description here
I can't try this solution at the machine I'm on (at work), but it might work if you just close the tag
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css" />
If not, it looks tidier and follows HTML5 in any case.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cssforsliding.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
</body>
</html>
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 #