I just started learning HTML and I've been stuck at this for hours.
The picture just won't show up.
.background {
background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Preptechies: The Wiki</title>
<link rel="stylesheet" href="Assets/main.css">
</head>
<body>
<div class="wrapper">
<header id="header">
<h1>Welcome to our <strong>Webpage</strong>!!</h1>
<h2>This is our group members</h2>
</header>
<div class="background">
</div>
</div>
</body>
</html>
I took the CSS from W3Schools because I want to make the image fit the whole background and won't repeat & move when I'm scrolling the browser.
The problem is .background doesn't have a height.
Yes, you have height: 100%, but this is relative to .wrapper which doesn't have a height.
Add: html, body, .wrapper { height: 100% } to fix this.
.background{
background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html, body, .wrapper { height: 100% }
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Preptechies: The Wiki</title>
<link rel="stylesheet" href="Assets/main.css">
</head>
<body>
<div class="wrapper">
<header id="header">
<h1>Welcome to our <strong>Webpage</strong>!!</h1>
<h2>This is our group members</h2>
</header>
<div class="background">
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
Why background image is not appearing? I am trying to add background image in a container and text over it in the middle. But image is not appearing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer {
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color: aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
height: 50%;
}
.frContainer {}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
Problem
You are trying to apply a background image without a specific width and height
Possible solutions
Specify width and height properties to your container CSS styles.
width: 100%;
height: 100vh;
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
width: 100%;
height: 100vh;
}
.frContainer{
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
try this
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: cover;
height:100vh;
}
I want my header to be a full screen background.
Code works on other sites that i previously made but now it doesn't work.
Please help.
The code is same on other websites. And it works.
Here is my html5 and css3:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
header {
background: url('./pics/bg1.jpg') 50% 50% no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome | SoundNet</title>
<meta name="theme-color" content="#6699ff">
<!--Meta-->
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-capable=yes">
<!--Js-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Categories</li>
<li>Playlists</li>
<li>Login</li>
</ul>
</div>
<div class="logo">
<span class="border-n">N</span>ESTA
<div class="button">
Sign Up
</div>
</div>
</header>
<section>
<div class="party">
<h3>Get the party started</h3>
<p></p>
</div>
</section>
</body>
</html>
[Edit: Added snippet but no image, for the moment.]
Define a height for the body. 100% height and width takes its parent height and width.
Because your body dont have both a width and height, the 100% height and width of your header won't have any effect.
Snippet
html, body {
width: 100%;
height: 100%;
margin: 0;
}
header {
height: 100%;
width: 100%;
background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<header></header>
I want to overlap the two images such that the bottom image comes up to the top image.
Here is the code
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.col-md-6{
margin: 1px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6"><img src="top-header-1.png"></div>
<div class="col-md-6"><img src="Base-BG_4.png"></div>
</div>
</div>
</body>
</html>
here is the attached screenshot
I want to be like this
You need to just add position:absolute; with position:relative as i used
.col-md-6{
margin: 1px;
}
.picContainer {position:relative;}
.pic2 {position:absolute; top:0px; left:0px;}
<href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<div class="container-fluid picContainer">
<div class="row">
<div class="col-md-6"><img src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div>
<div class="col-md-6 pic2"><img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"></div>
</div>
</div>
</body>
</html>
Even though you can use absolute positioning for your requirement, I don't think it is the best way now. You can achieve it using simple margin adjustments.
I hope this is something that you are looking for.
HTML
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="image-container">
</div>
</div>
CSS
.header {
width: 800px;
height: 200px;
background-image: url('http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg');
background-size: cover;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
.image-container {
width: 600px;
margin-left: 100px;
margin-top: -50px;
height: 200px;
background-image: url('https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg');
background-size: cover;
background-position: center;
}
Refer the codepen sample
I want my background image to be top centered with a black background extending 30% of the page Here is my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" text="type/css" href="../css/main.css">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
</head>
<body>
<div class="header">
</div>
</body>
</html>
And the css:
.header {
background: url(../images/header_background.jpg) no-repeat center top fixed;
height: 100%;
width: 50%;
}
Please help!
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/