CSS background-image code does not show up image - html

Hi I am trying to build a small website using HTML, bootstrap and css (I am a newbie). However in the css background-image does not work. I have checked the path and the file format and it is fine (infact am using brackets ide and it shows a thumbnail of the image when I hover the mouse over the path). Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>My First Web Project</title>
</head>
<body>
<!-- NAVIGATION HEADER -->
<div class="header" id="topheader">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-uppercase p-2">
<a class="navbar-brand" href="#">MY WEBSITE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">ABOUT US</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
</ul>
</div>
</div>
</nav>
<!-- BODY SECTION -->
<section class="header-section">
<div class="center-div">
<h1 class="font-weight-bold">Lorem ipsum dolor sit</h1>
<p>Hello we are developing this site</p>
</div>
<div class="header-buttons">
EXPLORE
CONTACT
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
CSS:
*{padding:0; margin:0; box-sizing: border-box;}
.header
{
background: url('../images/background.jpg');
}
Please help!

Have you checked your browser DevTools (right click on page and hit Inspect or CTRL+SHIFT+I in Chrome) to see if there is anything overriding your CSS?
It could also be the URL needs to change.. try changing it to the following:
background-image: url('images/background.jpg');
If you've tried to put in a URL directly from the web as mentioned and it still didn't work, then I suggest checking out if something is overriding the code, maybe declare !important in your CSS line to see if that makes a difference.
I've also experienced a few cases where the image was a JPEG and had to change it from JPG in the CSS. Check your browser Dev Tools to see what's going on. Hope this helps!

Change your CSS code to this and try it out:
.header
{
background: url('images/background.jpg');
}

you should give width and height to div that has a background image with background-size: cover
.header
{
background: url('images/background.jpg');
height:auto;
width:100%;
background-size:contain
}

Related

Bootstrap 5 vertically center aligning elements in navbar

I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.
body{
background: rgb(27, 25, 25);
}
.btn{
border-radius: 3em;
}
<!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>Adam Farrow </title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-xxl">
<a href="#" class="navbar-brand">
<span class="fw-bold text-secondary">
Adam Farrow
</span>
</a>
<button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link " href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
As you can see if you run the code, it will have the items slightly unaligned.
I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.
use padding-bottom or padding-top : 2px to position your github link

Dropdown Menu Won't Drop Down

Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.
Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - EmergencyContactsWeb</title>
<link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.2/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
</li>
<!--Dropdown Below-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Supporting Tables</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
<a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">...
Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)
I needed to include these script srcs under my link rels and in this order:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?
Hope that can help others! I had no idea there was a particular order.
You are using Bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>

bootstrap scrollspy not scrolling back to "home" and data-bs-offset is not working

my scrollspy isn't working properly. It starts at home and can scroll down but when scrolling back up all tabs highlight except the "home" tab when you scroll all the way up. Additionally I've tried to include the data-bs-offset= "100" in my body tag but that has no effect on the scrolling. The tab changes to the next too early so I wanted to fix this with data-bs-offset. I'm pretty sure i've included the necessary cdn links for the css and js from the bootstrap website. Any suggestions?
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/8caef0b63d.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Tatyana Chalik</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true">
<!-- navbar -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-lg-3 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3" href="resume.html">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
<header id="home">
<h1> hi </h1>
</header>
<main>
<div class="container" id="about">
<h2 class="pt-5 pb-4 text-center">About Me</h2>
<p class="pt-5 text-center"> jsdklajsdfljsdalkfjsdljflsdjflsdfljdf </p>
</div>
<div class="container" id="projects">
<h2>hi2</h2>
</div>
<div class="container contacts" id="contact">
<h2 class="text-center pt-5 pb-3">Contact Me</h2>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
Hello I found some similarity case with your case. And I try to help you with send the link below. You can read and choose the one which the case is close to your case. Thank you, hope it can help you. bootstrap offset scrollspy not working or How do I set the offset for ScrollSpy in Bootstrap? or this one data-offset in Bootstrap Scrollspy is not offseting at all

Bootstrap background image won't scroll

<!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">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!--Font awesome icons-->
<script src="https://kit.fontawesome.com/4e9b2916e9.js" crossorigin="anonymous"></script>
<!--Google fonts-->
<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=Roboto:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Bakery</title>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white p-2 h5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="No solo pan y café logo brown">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<div class="d-flex me-lg-5 mx-auto">
<ul>
<li><span class="social-icon social-facebook"><i class="fa fa-facebook"></i></span></li>
<li><span class="social-icon social-google"><i class="fa fa-google"></i></span></li>
<li><span class="social-icon social-tripadvisor"><i class="fa fa-tripadvisor" aria-hidden="true"></i></span></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!--Main-->
<section>
</section>
<!--Js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
It's my first post here so here goes nothing!
I'm in the process of learning html/css and right now I'm stuck on Bootstrap 5 background image.
I try to set it on the whole body, but the problem is it shows only a part of the image, the rest should be there when I scroll down but I can't scroll anything.
Here's the screenshot of the website, as you can see, a lower part of the background is missing, I should be able to scroll down but it just won't let me. Who would've thought a background image is such a pain in the neck in Bootstrap.
What am I doing wrong? Please be gentle! Thanks!
Website screenshot Website screenshot
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
}
You should use background-attachement, not background-position.
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Source: Mozilla MDN on background-attachment
Wrap your .row with .container or .container-fluid and it will solve the issue.
And if it won't scroll in mobile view you can make sure to use the meta tag in your head tag

bootstrap navbar hamburger dropdown working fine on desktop (all resolutions) but not on mobile device

My bootstrap and css is functioning fine on desktop browser, but when I go to the site via mobile there are two issues: the navbar isn't as wide as the hamburger toggle and image (regardless of image resize), and the hamburger drop down does not push page contents down--it overlays on contents--this could be fine, but I'd at least need to correct for width of navbar.
Any help is much appreciated
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="<css file>" >
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top" >
<a class="navbar-brand" href="/"> <img src="{% static "br_email/logo.png" %}" id = "logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/"><b>Home</b><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/events/"><b>Events</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/"><b>Contact</b></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/profile/"> <b>Profile</b></a>
<a class="nav-item nav-link" href="/logout/"> <b>Logout</b></a>
</span>
</ul>
</div>
</nav>
<main role="main" >
{% block content %}{% endblock %}
</main>
<div class="content"></div>
<footer class="footer">
<div class="row d-flex align-items-center">
<!--<!– Grid column –>-->
<div class="col-12 pt-4">
<!--<!–Copyright–>-->
<p class="text-center">
© 2020
•
<a href="/contact/" >
<strong> Contact </strong>
</a>
</p>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]>
</script>
<script>
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
</script>
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active'); $(this).parents('li').addClass('active');
}
});
});
</script>
</body>
</html>
Navbar related CSS
.navbar-fixed-top {height: 40x;}
.navbar-brand img {height: 40px;}
.navbar-dark{
background-color: #1a2125;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
Your navbar might resize if it doesn't have a defined width property. I looked through all of your code, and it doesn't look like your navbar has a set width in your css, or in your javascript/jquery/etc. The <nav> tag is also a block-level element, meaning that it will take up the entire space of a new row. If you wanted to change the width more easily, you could change it to an inline-block element in css, or use the margin and padding settings. One other mistake I caught is that in your css, at the top of the snippet, you typed 40x instead of 40px (Not sure if you caught that). If you read through your code carefully you may or may not find other mistakes.