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%; }
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 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!
i have a problem with positioning body background. It goes like :
<script type="text/javascript">
<!--body id="body" style="
text-align:center;
background-color:#031a43;
background-image : url('design/bgFrontPage.jpg');
background-repeat:no-repeat;
background-position: top center;" //-->
</script>
works just fine in all browsers except IE 9 where the bg moves to the left.
Any ideas?
very strange.
I try this code in my page:
<head>
<title></title>
<style type="text/css">
.bg
{
text-align: center;
background-color: #031a43;
background-image: url('Styles/166894621.jpg');
background-repeat: no-repeat;
background-position: top center;
}
</style>
</head>
<body class="bg">
</body>
Background image located in center.
I hope IE9/any can be rendered as IE8 by adding below line of meta in the head of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
I am having two problems. The first one, is that I am getting a break in FF, IE and chrome between the top img and the logo. The second problem only appears in IE and what happens is there is a border around the logo. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2E Network - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/top_page.png" width="963" height="29"><div id="logo"><img src="Images/logo.jpg" width="921" height="272" alt="Logo" longdesc="/index.php"></div>
</div>
<div id="main">
</div>
<div id="footer"><img src="Images/bottom_page.png" width="963" height="50">
</div>
</div>
</body>
</html>
Seperate CSS style Sheet
body {
background-image: url(Images/bkg.png);
background-repeat: repeat-x;
}
#wrapper {
width: 963px;
margin: auto;
}
#main {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logo {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logoimg {
margin-left: 15px;
}
Check the current page here
to fix the gap make the top image to display:block;
and the border
you can see it here
http://www.jsfiddle.net/CcvTD/2/
edit:updated so the borders are removed too
This will get rid of the border:
#logoimg img {
border:0px;
}
To fix the gap, try:
#header img, #logo {
margin:0px;
}