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"/>
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 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 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;
}