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>
Related
any content that I add inside a overrides the css reset and adds a 1em margin on the right side on the website (the bottom bar doesn't show but if you click with the mouse wheel you can slide it to the side).
/*Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
width: 100vw;
}
p {
margin:0;
margin-block-end: 0;
margin-block-start: 0;
}
header{
background-color: blueviolet;
}
section.sec1{
display: block;
background-image: url('assets/bg1.avif');
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
section.sec2{
background-color: cornflowerblue;
}
section.sec3{
background-color: green;
}
section.sec4{
background-color: gold;
}
<!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="stylesheet" href="style.css">
<title>html page</title>
</head>
<body>
<header>
<p>header</p>
</header>
<section class="sec1">
<p>sec1</p>
</section>
<section class="sec2">
<p>sec2</p>
</section>
<section class="sec3">
<p>sec3</p>
</section>
<section class="sec4">
<p>sec4</p>
</section>
</body>
</html>
How can i solve this issue? Thank you.
PS: the "bg1.avif" is 2158 x 1798px, but even without it you can see the problem.
You don't have to use width:100vw on html, body and section elements.
But if you want to, use 'width:100%;' instead of 'width:100vw;'
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 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>
Im trying to create a backround for the main section of my page. The size of the image is 640 x 480 and I want it to be the background for a container that is 1204 x 184. I know this question been asked before but none of the answers worked for me.
Question: How do I make the image to cover the size of the div while also keeping the aspect ratio so that i can still see the image in its entirety?.
p.s I added a my code but I do not have enough points yet to add pictures to my post.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container{
width: 98%;
margin: auto;
background: lightgray;
}
header{
width:80%;
height: 10%;
background: grey;
margin: auto
}
main{
margin-top: 0px;
width: 80%;
height:600px;
margin: auto;
margin-top: 10px;
background: url(https://placeimg.com/640/480/tech);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="main-container">
<header>
<div class="main-header">
<h1>Header</h1>
</div>
</header>
<main>
<!-- <div class="main-content">
-->
</main>
<section class="lower-sec">
<div class="left-box">
</div>
<div class="right-box">
</div>
</section>
</div>
</body>
</html>
Instead of background-size: 100% use
background-size: contain;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
What I am trying to achieve is a page with a sticky footer, which is a vector island.
The island is always at the bottom of the page, but when the browser height is too small it invokes vertical scrolling.
Behind the island is a sunburst that then falls behind all the page content. This is quite big, about 1417px high. This doesn't affect vertical scrolling though.
Here is what I have so far and I've been stuck for hours! Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background-color: #6ec8e4;
}
#wrap {
min-height: 100%;
height: auto;
}
.testBox{
height: 300px;
width: 100%;
background: red;
margin: 20px 0;
}
.footer-image-container {
margin: 0 auto;
position: absolute;
width: 100%;
height: 1417px;
}
.footer-image {
position: absolute;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div id="footer">
<div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png">
<img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div>
</div>
</div>
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
It would be better to use the images as background images in css:
see https://jsfiddle.net/6t9vxq1o/1/
.body{
height:100%;
background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom;
}
#wrap{
background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom;
}
This way the images will be always on bottom, the sunburst behind the content, and the grass behind the footer