I am creating a personal website in html and am trying to add a background image to the "index.html" page. I have pasted my the index.html and style.css code below:
HTML File:
<!DOCTYPE html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital#0;1&display=swap" rel="stylesheet">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Jack Hanel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Gallery
Education
<h1>Hello, I'm Jack Hanel</h1>
<img src="Photos/headshot.jpeg" height="257" width="207">
<p>Age: {age}</p>
<p>Date of Birth: 08/30/1998</p>
<p>Gender: Male</p>
<p>Height: 5'10"</p>
<p>Weight: 165 lbs</p>
<p>Born: Phoenix, AZ</p>
<p>Raised: Greenville, SC</p>
<p>Current Location: Charlotte, NC</p>
LinkedIn
Twitter
Instagram
Replit
</body>
</html>
CSS File:
<style>
body {
background-image: url(Photos/AbstractWallpaper.png);
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 28px;
}
a {
font-family: 'EB Garamond', serif;
background-color: lightgrey;
padding: 4px
}
p {
font-family: 'EB Garamond', serif;
font-size: 18px;
background-color: lightgrey;
padding: 4px
}
img {
margin: 4px
}
</style>
I've added the same background-image code line to the h1 tag, and it applies, although only showing the very top of the image. So I know the background-image code itself isn't the problem. Please help! Also, any other general advice is appreciated, I am brand new to HTML and CSS.
Thank You
I've tried adding the background-image element to the h1 tag, and it worked, although it only showed the very top of the image. But when I apply this line of code to the body tag, nothing appears.
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
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"
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");
At the top of my code I have:
< link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >
And in my CSS I have:
font-family: 'Merriweather', ;
But it is not showing up. I'm not sure what the reasoning is. It seems so simple and yet nothing is working.
Any help would be appreciated.
Here is the top of my HTML:
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<head>
<title>Jesse | Personal Chef </title>
<meta charset="UTF-8">
<meta name="description" content="Jesse Personal Chef">
<meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
<meta name="author" content="Cal & Jen T.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is my CSS, saved in as stylesheet.css:
<style>
/* HEADERS ~~~~~~~~~~ */
h1 {
font-family: 'Merriweather', ;
text-align: center;
font-size: 2.7em;
color: 000;
font-weight: 500;
letter-spacing: 2%;
line-height: 40px;
padding-bottom: -100px;
margin: 2%;
}
.subtitle {
font-family: 'Merriweather', ;
text-align: center;
font-size: 1.04em;
color: 000;
font-weight: regular;
margin: 1;
line-height: 1px;
padding-bottom: 60px;
}
</style>
Thank you
One little fix needed:
Change this:
font-family: 'Merriweather', ;
To this:
font-family: 'Merriweather', serif;
The serif portion is the fail-over font in case it can't find Merriweather.
Test it in this snippet:
<html>
<head>
<link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
<style>
div {
font-family: Merriweather, serif;
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
You can also just apply the font-family style to the <body> tag and all child elements will inherit that font-family.
Check fonts link:
if you use #font-face rule check link to the folder with fonts and be sure that font files is present in this folder, also check fonts name in #font-face rule and in font-family they must be equal;
if you use CDN - check the link to the CDN;
Open Dev Tools in your browser(Ctrl(Command) + Shift + I) and in the tab Network check whether your font is downloaded or not: https://prnt.sc/r9x8ab;
I'm trying to upload the Montserrat font from google fonts on a website I'm building and for some reason it's not happening. I've read a separate Q&A on here that suggests it may be an issue with chrome?
I want Montserrat specifically because it's the closest google font likeness to Gotham.
This is how I have it loaded on my file -
style.css
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,80);
body{
font-family: 'Montserrat', sans-serif;
}
I tried it also in my <head> section in index.html underneath the bootstrap link -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
I don't know whether it's an issue with bootstrap not wanting to override or a separate issue. Any assistance appreciated.
Follow the below code.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
</style>
<body>
<h1>Montserrat</h1>
</body>
I had a similar issue and this is how I solved it.
First import the "Montserrat" font to the "bootstrap.css"
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
then replace the font-family with Montserrat;
body {
margin: 0;
font-family: Montserrat;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}