Background-image doesn't show up in a div - html

It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:

I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.

Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");

Related

<hr> tag not showing based on Bootstrap version

<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Hi, I'm new to learning html, css and bootstrap. I came across that a particular tag would not appear. It turns out the link I was using to receive the bootstrap CSS was the problem.
I've tried: Changing the css properties of the hr to different colours (still wouldn't show). The problem gets isolated to the link for bootstrap. The unusual thing is that it doesn't work with the second link being bootstrap 5.0.2, but it works with the first link bootstrap 4.3.1.
I've also tried to mark the css properties as !important on my own stylesheet placed beneath the bootstrap css.
Thank you for the help ^_^.
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<!-- Allows <hr> tag to be seen
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-->
<!-- Prevents <hr> tag from being shown -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Your own stylesheet -->
<!-- Want to put it beneath Bootstrap's CSS since want it to have superior priority-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--
h-100 means you want the container to span the entire height of page
Hence, you can get the the items aligned within the container at its center.
-->
<div class="container d-flex align-items-center h-100">
<div class="row">
<!--
Use col-12 since bootstrap grid system has 12 slots per row
using col-12, ensures your div spans the entire row.
-->
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<div class="buffer col-12"></div>
<section class="text-center col-12">
<hr>
<a href="https://mailchi.mp/b24dbfe7c665/kimchilettuce">
<button class="btn btn-primary btn-xl">Find out more</button>
</a>
</section>
</div>
</div>
</body>
</html>
Below is my css file
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
color: #e2dbdb;
font-size: 3rem;
}
hr {
border-color: #F05F44;
border-width: 3px;
max-width: 75px;
}
.buffer {
height: 10rem;
}
.btn {
font-weight: 700; /*This is different from font size. This specifies how thick the words are*/
border-radius: 300px;
text-transform: uppercase;
}
.btn-primary {
background-color: #F05F44;
border-color: #F05F44;
}
.btn-primary:hover {
background-color: #ee4b08;
border-color: #ee4b08;
border-width: 4px;
}
.btn-xl {
padding: 1rem 2rem;
}
When using bootstrap css 4.3.1
When using boostrap css 5.0.2
This works fine for me
Please share your body part of the webpage. The error might be there.
h1 {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startup</title>
<!-- Required meta tags -->
<!-- Recommended to always add them -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
<h1>Sample text</h1>
<hr />
</body>
</html>
Hope this helps!

Background image won't show up in header

I am trying to follow along on Colt Steele's course and for some reason my background image will not show up. I've checked everything and I'm stuck. I tried writing in the style tag and inserting the background in html instead of creating a separate css file like he did and it did not work. So instead I tried to just make a separate css file which I'm more comfortable with so far. Please let me know what I can do. Thank you!
<!doctype html>
<html lang="en">
<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" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Blog</h1>
<p class="lead">Lorem ipsum</p>
Do Something
Another Thing
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS
#header {
background-image: url(https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80) !important;
}
Your URL needs to be a string i.e you need to add an apostrophe ( ' ) on each side of it ('https://images.unsplash...'):
#header {
background-image: url('https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80') !important;
}

Css background image not resolving

I am attempting to select header-logo I tried the following selector suggested by css selector
body > div > div.header-logo
{
background-image: url("logo.png");
}
For the html of the below
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
But when I view it in chrome it is showing unresolved
you don't need the > sign to track the element you just use space when its element and use . if its sub element
example : body div.header-logo
you can find useful tutorial for css here
div>div.header-logo
{
background-image: url("https://tproger.ru/wp-content/uploads/2015/03/stack-overflow-logo-2.png");
width: 720px;
height: 270px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
but, if you wont add a logo, correct do this:
<div class="header-logo">
<img src="logo.png" alt="It's a logo">
</div>

how to have different background images in two different pages in angular2?

I have a angular 2 application on which i have to use seperate background images on home page and other pages, i have applied image on index.html to have a background image but i need to add different image on different pages.
This is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="resources/js/semantic.min.js"></script>
<script src="resources/js/slideshow.js"></script>
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />
<link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css">
<link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="resources/css/styles.css" rel="stylesheet" type="text/css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/chart.min.js"></script>
<script src="resources/js/chart-data.js"></script>
<script src="resources/js/easypiechart.js"></script>
<script src="resources/js/easypiechart-data.js"></script>
<script src="resources/js/bootstrap-datepicker.js"></script>
<script>
<!--Icons-->
<script src="resources/js/lumino.glyphs.js"></script>
</head>
<body style="background-image: url("resources/static/pic/slide_1.jpg");" >
<app-root></app-root>
</body>
</html>
Please suggest me how to achieve this.
What about applying a background image at the component level instead of inside the index.html? Then each component could have a different background image. You could even have a separate css file that includes a snippet of code like this:
body { background-image: url("resources/static/pic/slide_1.jpg"); }
and include it in each component "styleUrls" that you want that background image to appear on. Use a different css for the components you want a different image on.
Hope this helps
Yes you can do this like you can have different background images on different components of your app. To do this please follow the instructions given below.
In your main css file that is style.css give the height 100% to the body & html please refer the below code.
Style.css
body,html{
height: 100%;
}
Now in your components css file that is namespace.component.css file add the below code
.component-body{
background-image: url(/assets/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
Now make sure that you are having all the contents inside the div contains this class. You can have the dive classes & the css into their css files accordingly. For more information you can refer this link

Can't disable responsiveness of Bootstrap

I just want to ask how can I disable responsiveness of Bootstrap. I currently followed the instructions in the tutorial but I can't make my page non-responsive.
What I did in my code is:
1. I removed the viewport in meta tag
2. Set a width in the class .container
When I resized my windows the 3 columns are became responsive.
Here's my sample fiddle
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chuosenko</title>
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./third_party/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="./third_party/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="./third_party/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./js/packery.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<h1>COL 1</h1>
</div>
<div class="col-md-4">
<h1>COL 2</h1>
</div>
<div class="col-md-4">
<h1>COL 3</h1>
</div>
</div>
</body>
</html>
Here's my css:
.container {
width: 1280px;
max-width: none !important;
}
Can you help me with this?
use col-xs-* class for grid. Like suggested in the tutorials.