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!
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
For a project I started making a template containing a banner (80% of the page).
Yesterday I had a problem with using %. % wasn't working for me while vh did. The problem, someone said, was that the div where I had put the background was also in a div but without a height. So I defined that to 100%. But still it doesn't work. The background-image is just as big as the content of the div itself.
My codes:
#charset "utf-8";
/* CSS Document */
/*MAIN*/
body{
width: 100%;
height: 100%;
}
/*BANNER*/
#banner{
width: 100%;
height: 100%;
background-color: black;
}
#bannerimg{
background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 80%;
}
<!DOCTYPE html>
<html>
<head>
<!--ALGEMEEN-->
<meta charset="utf-8">
<title>Homepagina - RC paneel</title>
<!--FONT-->
<!--INCLUDE-->
<link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!--STYLE-->
<link rel="stylesheet" href="css/index.css">
<!--SCRIPT-->
</head>
<body>
<!--BANNER-->
<section id="banner">
<!--NAVBAR-->
<!--BANNER-->
<div id="bannerimg">
Test
</div>
</section>
<!--OVER ONS-->
<!--VEELGESTELDE VRAGEN-->
<!--CONTACT-->
</body>
</html>
Add html to the body selector you have to have a height reference for body
#charset "utf-8";
/* CSS Document */
/*MAIN*/
html, body{
width: 100%;
height: 100%;
}
/*BANNER*/
#banner{
width: 100%;
height: 100%;
background-color: black;
}
#bannerimg{
background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 80%;
}
<!DOCTYPE html>
<html>
<head>
<!--ALGEMEEN-->
<meta charset="utf-8">
<title>Homepagina - RC paneel</title>
<!--FONT-->
<!--INCLUDE-->
<link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!--STYLE-->
<link rel="stylesheet" href="css/index.css">
<!--SCRIPT-->
</head>
<body>
<!--BANNER-->
<section id="banner">
<!--NAVBAR-->
<!--BANNER-->
<div id="bannerimg">
Test
</div>
</section>
<!--OVER ONS-->
<!--VEELGESTELDE VRAGEN-->
<!--CONTACT-->
</body>
</html>
You have to add html as well, this way your min height of the page will be 100% vh. then you can use #banner with %
html,
body{
width: 100%;
height: 100%;
}
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 have tried adding an img tag with the same src and it works but i don't know why this is not working...
**html code**
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="1234.css">
</head>
<body>
<h1>huy</h1>
</body>
</html>
CSS
body {
background-image: url("images/scenery.jpg");
}
Try using the below snipped how to use background
body {
background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="1234.css">
</head>
<body>
<h1>huy</h1>
</body>
</html>
The html and body may need to be set "height: 100%"
Try adding these code in your css:
html, body { height: 100%; }
I'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<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.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
I want the logo of my page on the top left corner surrounded by a black background. However, the background color does not cover the area on the right of the image. I am using HTML and CSS.
This is my code:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>
Remove align="left" attribute. It acts similar as if you made image float: left, however you never clear the float after so the parent collapses and you simply can't see background:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" />
</a>
</div>
</body>
</html>
If you want to make logo left-aligned you should use text-align: left of the #title, it will work properly because img is inline-block by default.
You have to add a display rule to your title element so that it actually gets a placement in the flow:
#title {
display: inline-block;
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>