I currently have a css file that I want to link in visual studio. I have included the file in my project yet it is still not working.
I am simply using css to change the body background. Here is my code:
Css - folder: /css/Style.css:
body
{
background-image: url('Images/body-background.jpg');
background-repeat: repeat-x;
}
Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/Style.css" />
</head>
<body>
<div id="header">
</div>
<div id="page-wrap">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<p>Main Content</p>
</div>
<div id="footer">
</div>
</body>
</html>
It all works perfectly when I put the style internally in the head it works perfectly. What's going on?
The link in the css file to your image is relative to the css file.
try
background-image: url('/Images/body-background.jpg');
to get it from root, or
background-image: url('../Images/body-background.jpg');
to get it relative to the css file.
This will work in css file.
body
{
background-image: url('/Images/body-background.jpg');
background-repeat: repeat-x;
}
Related
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part, its is not working, It does not show on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
[Code][1]
[Output][2]
[Design][3]
[1]: https://i.stack.imgur.com/K19ny.png
[2]: https://i.stack.imgur.com/Iluoa.png
[3]: https://i.stack.imgur.com/fGDMf.png
Your code looks fine and could also be tested successfully. The only thing which may cause your problem is your path to the CSS file.
Check if the path in <link rel="stylesheet" href="css/main.css"> is correct.
You said you are using scss for writing styles so you must be using local node setup or might be using the ruby compass thing.
Please check if your local development setup is outputting the css file at correct path.
you should try below command if using node-sass
sass --watch scss/main.scss:/css/main.css
Then add this to your HTML
<link rel="stylesheet" href="./css/main.css">
I am learning web design and i have a very simple issue that i haven't been able to find an answer to. I created a very simple page for an example and both documents are in the same folder. it works as a snippet on here, but then it doesn't work on my computer. I have checked the filepath for the stylesheet several times, but it doesn't work. If anyone can help that would be very appreciated. Thanks!
(im not sure if the snippet is useful but i thought i would include it anyways)
body {
background-color: #eee;
}
#header {
background-color: #66CCFF;
color: white;
}
<div id="container">
<div id="header">
<h1>text</h1>
</div>
<div id="content">
<div id="nav">
<h3>nav</h3>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="main">
<h2> other text </h2>
</div>
</div>
</div>
This mainly has to do with the path of the file. Try this:
href="./style.css"
If that doesn't work show us the error you get
Just remember to follow this, to avoid again issue in case of accessing through parent directory:
parent folder:
<link rel="stylesheet" type="text/css" href="../style.css" />
same folder:
<link rel="stylesheet" type="text/css" href="./style.css" />
.main_banner {
background-image: url("../images/main_banner.png");
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<heading>
<title>
**********
</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</heading>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<body>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
I have a div tag in my HTML assigned a class of main_banner.
For some reason, I cannot get my image that is specified in my stylesheet to display.
I have my main project folder which contains the following: index.html, images (folder), and styles (folder). My image, main_banner.png, is located in my images folder.
What am I missing?
.main_banner {
background-image: url('../images/main_banner.png');
}
Assuming you have referenced your style sheet correctly, you will need to specify a width and height in your CSS. The DOM only sees your block elements as empty. Once you give a height and width your image will show up.
.main_banner {
background: url("../images/main_banner.jpg");
/*background: url("https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=");*/
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
**********
</title>
<link type="text/css" rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
Here is my html code :---------------------------------------------------
<!doctype html>
<html>
<head>
<title>My webpage </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1> My website </h1>
<ul>
<li> Home</li>
<li> page 2 </li>
<li> page 3 </li>
</ul>
<h2> This is my homepage</h2>
<p> All of my homepage content</p>
</body>
</html>
the background is suppose to go red but doesn't ?
css code from another file:
body{
background:#red;
}
When using a named colour you do not need to use a hash, hashes are only used for hexadecimal colours.
In order to change the background to red, use the following code:
background: red;
Or, you can do this (#ff0000 is the hexadecimal code for red):
background: #ff0000;
Named colors do not need hash sign:
body{
background:red;
}
I am using the following css to display a background image on a page. However, all I get is a blank white background instead. I've been googling around, but can't figure out what is wrong with what I'm doing... any suggestions?
CSS:
#home_body {
background: url(/resources/images/main_tree.png) no-repeat;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="resources/css/main.css">
</head>
<body id="home_body">
<div>
<h1 class="main_heading">Welcome</h1>
</div>
<div id="home_nav">
<nav>
<ul id="main_menu">
<li>Shop</li>
<li>Gallery</li>
<li>About Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
1) If you copy paste the image URL into your browser does the image display?
2) Encase the CSS class image reference in single quotes.
3) Check your referencing, you're referencing the image from the root as <root>/resources/images/main_tree.png in the CSS but the HTML page is asking for a relative resources/css/main.css CSS file, everything should be root referenced (so all addresses on the page should start with a / ).
4) Check no other classes or CSS rules are being applied to the <body> element and are "overwriting" your background.
5) Try using background-image rather than the background shorthand. But remember to put the no-repeat in a new property:-
background-image: url('/resources/images/main_tree.png');
background-repeat: no-repeat;
#home_body {
background-image: url(/resources/images/main_tree.png) no-repeat;}
change css class to view image