CSS - background-image property won't show image - html

.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>

Related

WHy does my HTML doesn't line up with my CSS?

I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file
Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>1st project</title>
<link rel="stylesheet" href="./reset.css"/>
<link rel="stylesheet" href="./style.css"/>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>
<body>
<div class="top">
<div class="top_content">
<img src="/base/materials/4.png"/>
<div>
<h3>Web Development Course</h3>
<span> Learn to code with basic paths</span>
<button>Browse course</button>
</div>
</div>
</div>
<div class="top_sub-content">
<nav>
<ul>
<li>Home</li>
<li>Careers</li>
<li>Blog</li>
</ul>
</nav>
<img src="/base/materials/5.jpg"/>
</div>
<footer>
<div>
<img src="/base/materials/4.png"/>
<h3>Join the list</h3>
<span>Sign up for the list</span>
</div>
<div>
<div>
<input placeholder="Enter your email"/>
<button>Subscribe</button>
</div>
<span>We won't spam</span>
</div>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
}
.top {
display: flex;
.top_content {
flex: 1;
}
.top_sub-content {
background: #33A3EF;
flex-basis: 40%;
img {
max-width: 100%;
}
}
}
If both files are in the same location, remove the dot and slash from the beginning of the link
Before
<link rel="stylesheet" href="./style.css"/>
After
<link rel="stylesheet" href="style.css"/>

Images are not loading on netlify and links aren't working

html{
background-color:#abb2bc;
}
body{
margin:0;
}
h1 {
margin:0;
background-color: #363b42;
}
img{
width:250px;
}
.navbar{
text-align:center;
}
.blogpost{
background-color:white;
padding:5%;
margin:3%
}
#blogheader{
margin-top:15px;
}
.blogimage{
margin-top:25px;
}
<!DOCTYPE html>
<html>
<head>
<title>GamingCoachBlog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="navbar">
<h1>GamingCoach</h1>
</div>
</header>
<main>
<div class="blogpost">
<h2 id="blogheader">Recent Blog Posts</h2>
<img class="blogimage" src="/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png" alt="How to get more wins in Fortnite">
</div>
</main>
</body>
</html>
I connected my github repository to my netlify website and it loads fine. In my github repo it has an images folder but my images will not load.
I also have a link set to the images that has another html file linked to it but whenever i click on it it says page not found. Please explain why this is happening.
You must specify the path that you want to link at or it won't know where do you want to point at.
<!DOCTYPE html>
<html>
<head>
<title>GamingCoachBlog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="navbar">
<h1>GamingCoach</h1>
</div>
</header>
<main>
<div class="blogpost">
<h2 id="blogheader">Recent Blog Posts</h2>
<img class="blogimage" src="C:/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png" alt="How to get more wins in Fortnite">
</div>
</main>
</body>
</html>

back ground image inside section not displaying

I can't get any pics or links of pics to show. I tried using multiple
links and pics. Nothing works. All files in the same folder, and CSS
connected. I don't know what to do any more.
HTML
<!doctype html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset= "utf-8">
<title> portfolio website </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<html>
<body>
<section class:"main">
<div id="container">
<div class:"header">
<nav>
Home
About
Portfolio
</nav>
</div>
</div>
</section>
</body>
</html>
CSS
Body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.main{
height: 100%;
width: 100%;
margin: auto;
background-image: url("rockets.jpg");
background-repeat: none;
background-size: cover;
}
Wrong:
<section class:"main">
<div class:"header">
<nav>
<a href:"index.html">Home</a>
<a href:"About.html">About</a>
<a href:"Portfolio.html">Portfolio</a>
</nav>
</div>
</section>
Answer:
<section class="main">
<div class="header">
<nav>
Home
About
Portfolio
</nav>
</div>
</section>
NOT ":" YOU MUST USE "="

I want to center my <div> with css codes

I am learning HTML and CSS and i have problems with positioning.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
</html>
And this is my CSS code:
#main{
text-align: center;
}
I cant align my text, how do i do this with HTML and CSS?
To horizontally center a block element (like div), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align:center !important
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main" class="center">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
best to use a class when applying across many divs.

CSS code in HTML and main.css

Any ideas why this CSS code doesn't work when I put it inside main.css file?
I'm trying to make fullscreen background.
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<style>
.bg {
background-image: url("nuotraukos/bg.png");
min-height:100%;
min-width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Nothing seems to be wrong with your <link>.
Check if the file really exists and if the html page is in the same directory as the CSS folder. Otherwise the file path is wrong.
If the image is not displaying, it's probably because it's not in the same path as the .css, so you should change the link too.
Let's suppose your image is one folder up the css file. Then you should change the url to this:
url("../nuotraukos/bg.png");
Also it's not a good practice to use a div to set a background, so instead of using a div to set a background, set a background to the <body> and stretch it.
body {
background-image: url("http://images.alphacoders.com/538/53823.jpg");
background-size:cover;
}
<head>
</head>
<body>
</body>
Maybe it would help if you change the path when you place main.css in the CSS folder?
background-image: url("../nuotraukos/bg.png");
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width intial-scale=1.0"/>
<meta https-equiv="X-UA-Compatible" content="ie-edge"/>
<title>First Website</title>
<link rel="style-sheet" href="css/reset.css"
<link rel="style-sheet" href="css/main.css"
</head>
<body>
<div id="Home">
<div class="box"></div>
<div class="background-image">
<div class="content-area">
<div class="user-image">
<div class="circle">
</div>
</div>
</div>
</body>
</html>