I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
i tried this but it only works when the screen is before the vertical scroller appears, and then when you scroll down the background color is back to white.
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}
<div class="background"></div>
The problem is that by default body has padding.
"Manjuboyz" solution works to an extent but a globally applied style might cause issues in the future.
This snippet will fix it by removing the default body padding:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>
If your page is too long however, you will need the position: fixed property, this makes sure that the div will follow the rendered view area on their device by 'fixing' it to the visible view-able screen. W3 has some good examples of it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: fixed;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
I started to design my portfolio and I have this problem I set pattern for a background but I want to have and 1 more color and 1 sliced image over this pattern. I started to code it and everything was fine except that my navigation menu and other things were under this color and picture which i added. This is the HTML code and CSS. Please help?!?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Wrapping up HTML5</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-wrap">
<div id="cornerfill"><div class="fillmask"></div></div>
<div id="fillright"><div class="rightfill"></div></div>
</div>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
<section>
<article>
<hgroup>
<h1>This is actually legal</h1>
<h2>Just wrap everything in a div, just like before</h2>
</hgroup>
<p>But it's probably better to simply use the body tag.</p>
</article>
</section>
<footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
html
{
width:100%;
height:100%;
}
body {
width: 100%;
height: 100%;
min-width:960px;
min-height:600px;
margin: 0;
padding: 0;
background: #FFF url(../img/bg.png) fixed;
}
#cornerfill
{
position:fixed;
top:0;
left:0;
width:50%;
height:100%
}
#cornerfill .fillmask
{
width: 100%;
height: 100%;
background-color:#070707;}
#fillright {
position:fixed;
top: 0;
right: 0;
width:50%;
height: 100%;
}
#fillright .rightfill
{
margin-left:-20px;
width: 600px;
height: 100%;
background:url(../img/bgup.png) left bottom no-repeat;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
header
{ width:auto;
height:auto;
background:#FFF;}
#top-wrap
{
width:100%
height:40%
}
Try applying z-index to control the layering of elements on the page.
On a page styled with Twitter Bootstrap and using the navbar I wanted to fill the whole container below the navigation bar with a Google Maps map. To accomplish that I have added the CSS following below.
I define for the html and body elements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
The map's height is now the same as the whole page height, which results in a scroll bar which I can scroll for the 40px the navigation bar adds. How can I set the size of the map to 100% - 40px of the navigation bar?
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
html, body {
height: 100%;
width: 100%;
}
.fill {
height: 100%;
width: 100%;
}
.navbar {
margin-bottom: 0;
}
For completeness the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
<div class="container fill">
<div id="map">
</div>
</div>
</body>
</html>
You could solve the problem with absolute positioning.
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
Demo (jsfiddle)
You could also make the navbar .navbar-fixed-top and somehow add a padding or margin inside the #map element.
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/