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;
}
Related
I have this code snippet
<!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>Document</title>
<style>
.body{
background: url("https://images.pexels.com/photos/13760434/pexels-photo-13760434.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") rgba(23, 27, 45, 0.8);
background-repeat: repeat-x;
background-blend-mode: overlay;
}
.main{
display: flex;
justify-content: space-between;
}
.card{
background-color: white;
padding: 1rem;
}
</style>
</head>
<body class="body">
<main class="main">
<div class="card">
<h1>Card 1</h1>
</div>
<div class="card">
<h1>Card 2</h1>
</div>
<div class="card">
<h1>Card 3</h1>
</div>
</main>
</body>
</html>
My goal was to apply background image repeat to x axis and adding a overlay on top of that image. If you run this code and view results in full screen, you will see after the image also the overlay part appied. I think the reason is I added image to the body tag. I still want add the image to the body tag and overlay only to the image. It should not exceed the image.
Right after the image I want to see the normal background color white. How do I achive this in CSS?
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>
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>
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
It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code.
.jumbotron {
background-image: url('SONUBANNER.png');
height: 500px;
width: auto;
margin-top: 5rem;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="jumbotron">
<div class="container">
</div>
</section>
</body>
</html>
I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?
/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.jumbotron {
height: 500px;
display: flex;
align-items: center;
background: url("SONUBANNER.png") center center;
background-size: cover;
margin-top: 5rem;
}
<div class="jumbotron">
</div>
You won't be able to use all of the features in Bootstrap if you are adding image with your CSS class.Just use the bootstrap features which comes.Add your image in to img-responsive class.
.jumbotron {
height: 500px;
width: auto;
margin-top: 5rem;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<section class="jumbotron">
<div class="container">
<img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre">
<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> -->
</div>
</section>
</body>
</html>