Need some help getting my background image to display on my page.
I'm having trouble getting it to work and I can't figure out why because to me it seems like I spelled everything correctly. Any help would be appreciated.
HTML
'<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>'
CSS
'body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};
.pageOne{
background: url("../images/mountains.jpg");
};'
Your <div> is empty, which means that it is 0px tall (there needs to be some content to force it to "expand"). Try setting the height explicitly in your CSS.
.pageOne {
height: 100px; /* or whatever height you want */
background: url("../images/mountains.jpg");
};'
.pageOne is an empty div. Your current content is in your <body> tags. If you put the background on your body instead, it would appear. A div shouldn't be outside the body tag anyways. If you leave your div outside of the body, it could render faulty.
Checkout this example
You made several mistakes in your html and css
pageOne is empty put some content in it or you can give height of that div from css
don't add ; semicolon like this .pageOne{}; remain part of css will not execute
Hope this will helps you
body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
}
.pageOne{
background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 100px;
width: 100%;
text-align: center;
}
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
hi
</div>
<body>
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
</body>
</html>
Related
How to make hover effects for an image?
code sample:
img:hover {
background: X;
color: X
}
<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>
how about this?
src : CSS hover effect for PNG images
enter code here
.navLi img {
opacity: 0.3;
}
.img:hover {
opacity: 1;
}
You need to apply the styles to the parent element .navDash:
.navDash:hover {
background: blue;
color: white;
}
<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>
If you want to only affect the image then you should wrap it with it's own parent div:
.dashImgWrapper {
display: inline-block;
}
.dashImgWrapper:hover {
background: blue;
color: white;
}
<li class="navDash">
<div class="dashImgWrapper">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt="">
</div>
Dashboard
</li>
Elaborating on j08691's comment, the thing is, for an <img> element, the color and background properties don't have any effect on it, that's because the <img> element only displays the image given to it. Thus, even though these properties are applied on the <img> tag on hover, they have no effect on it.
Other properties that affect the <img> tag like height will show its effect on hover.
Based on what you wanted, here's the code that will give you the desired outcome:
<!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>ITC-SaaS Kit</title>
<link rel="stylesheet" href="/new.css" />
<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=Poppins&display=swap" rel="stylesheet">
<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=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
.navLi:hover{
background: #16251217;
color: #90A0B7;
}
/*On hover, the image will dissappear and the span will take the required color.*/
.navLi img:hover {opacity: 0;}
.navLi span:hover {background-color: blue; display:inline-block;}
</style>
</head>
<body>
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">s.ferguson#gmail.com</span>
<span id="side1-2"><img src="" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<!--Put all <img> tags inside a <span> tag.-->
<li class="navLi"><span><img src="./imgs/Tasks.png" alt="tasks"></span></li>
<li class="navLi"><span><img src="./imgs/Email.png" alt="email"></span></li>
<li class="navLi"><span><img src="./imgs/Contacts.png" alt="contacts"></div></li>
<li class="navLi"><span><img src="./imgs/Chat.png" alt=""></span></li>
<li class="navLi"><span><img src="./imgs/Deals.png" alt=""></span></li>
<!-- <li class="navLi">toggle</li> -->
<li></li>
</ul>
</div>
<div class="main-content">
<div class="nav">asdasd</div>
<div class="tasks">
<div class="left-side">
<div class="top-left">
<ul class="date">
<li>Monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
</ul>
</div>
<div class="bottom-left">adasd</div>
</div>
<div class="right-side">asda</div>
</div>
</div>
</body>
</html>
Here, we have put all the <img> elements inside a <span> element. So, whenever the user hovers on the image, the image will become transparent (or disappear) and that span tag will take the color you want it to.
Try this:
img:hover {
border: 3px solid black;
}
I'm new to html + css and having lots of trouble while making a basic simple website. My css properties often be overridden by static property that I can't find with inspect tool in Chrome.
Regarding CSS, my body tag is not working at all, the h3 tag also not working even though it's separated from class/div, etc.
Then my hover code is partly working, every code in the hover tag works just fine, however, if I want to change the text color to white, it doesn't do anything.
Regarding html, I put up a banner and the text is hidden behind the banner, I am unsure how to pull it out and place beneath the banner.
body{
clear: both;
background-color: #EBD8B7;
}
.navbar{
background-color: #EBD8B7;
height: 70px;
}
.navbar-brand {
font-size: 3em;
padding-left: 50px;
color: #DA723C;
font-family: 'Dancing Script', cursive;
letter-spacing: 5px;
}
.nav-link
{
color: #DA723C !important;
font-size: 25px;
margin-right: 50px;
font-family: 'Dancing Script', cursive;
}
li a:visited{
color: #ee9a00;
}
a:hover {
text-transform: uppercase;
color: white;
border-bottom: 0.5px solid #fff ;
}
.h3{
color: red;
font-size: 3rem;
text-align: center;
}
.banner {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-image: url(pic.png);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>36 Cafe</title>
<link rel="shortcut icon" href="logo.ico" />
<!-- Boostrap5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<!-- Jquery here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="">36 Cafe</a>
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Order Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Hours</a>
</li>
</ul>
</div>
</nav>
<h3> WE ARE OFFICIALLY OPEN FOR DINE-IN </h3>
<div class="banner">
<div class="content-area">
</div>
<h5>Please wear your mask</h5>
<p> We have 50% of capacity, please wear your mask until seated.</p>
<p> She nervously peered over the edge. She understood in her mind that the view was supposed to be beautiful, but all she felt was fear.
There had always been something about heights that disturbed her, and now she could feel the full force of this unease.
She reluctantly crept a little closer with the encouragement of her friends as the fear continued to build. She couldn't help but feel that something horrible was about to happen. </p>
</div>
<script>s
</body>
</html>
body {
background:red;
}
.body {
background:red; /* does not work*/
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
You've done a very simple mistake with the body tag. Instead of bodyyou've used .body. The dot is only used for classes, to directly select an element by its tag you just use its tag name. For example, h1 {}selects all h1 tags and .first-h1 will select all elements that have that class.
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 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 is not workink, I does not shown 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>
Design in XD :
Code Image:
Output:
Try a.logo2:link, a:logo2:visited as a selector for that CSS rule. That should be more specific than the browser default a:link and a:visited and overrule them.
im making a website from scratch for the first time, i am formally educated on html but not css
pls explain heres my html
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
heres my css
.header {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
}
someone please explain how to get the effect i want this is what it looks like
ss of my page
You need to set the style to .logo, not .header
.logo {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
margin: 0;
}
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
Please remove padding on button.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).