I have the following code but my image won't resize, how come? Does the image need to be bigger?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>blah</title>
<style type="text/css" media="screen, print, projection">
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
</style>
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
</body>
</html>
You also need this:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:0;
padding:0;
}
Note, using css3 you can do this:
body{
background:url(...) no-repeat;
background-size: 100%;
}
Edit: Missed a ;
Demo:
http://jsfiddle.net/jJT45/
You're setting it to 100%, but 100% of what? Try giving the body the same 100% height and width properties and see what happens.
Related
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
I am trying to make my #main div scroll on top of my #main2 div. I positioned both absolutely and used background-attachment: fixed on #main2, but the intended effect does not seem to be working. BY "scroll on top" I mean that when you scroll down on the mouse, #main should scroll down towards a fixed #main2. #main2 should be like the background image of the body while #main1 fluidly scrolls down to the bottom of the body.
https://www.youtube.com/watch?v=GJLzP_4bg3o #7:50 is what I am trying to replicate.
body {
margin: 0 auto;
}
#main {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
Just change #main to position: fixed; and give z-index: 1;
body {
margin: 0 auto;
}
#main {
position: fixed;
width: 100%;
height: 100%;
background-color: red;
z-index: 1;
}
#main2 {
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
top: 100%;
background-attachment: fixed;
}
<!Doctype HTML>
<head>
<html lang="en"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="clc.css">
<title>CLC Website</title>
</head>
<body>
<div id="main">
</div>
<div id="main2">
</div>
</body>
</html>
To get the parallax effect, I just changed the background-color to background-image and it works fine now.
Check this if help you out.
<head>
<style>
.main { height: 300px; width: 300px;background-color: blue; background-repeat: no-repeat; background-attachment: fixed;
position: fixed;}
</style>
</head>
<body>
<div class="main"></div>
<div style="background-color: red; height: 3000px; width: 300px"></div>
</body>
New to coding - can you help me place a footer over the iframe? It needs to cover the dark grey footer that is currently in the iframe, and also needs to be responsive if the page is zoomed in or out. It can be dark gray for now.
Attached is the current coding.
Thanks for your help.
<!doctype html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8" />
<style>
body {
display: flex;
margin: 0;
height: 100vh;
}
iframe {
min-height: 100%;
min-width: 100%;
}
</style>
</head>
<body>
<iframe scrolling="no" src="https://onedrive.live.com/embed?cid=71689B83CE6D0B52&resid=71689B83CE6D0B52%217352&authkey=AOXRS7b8IrWU4Qs&em=2"></iframe>
</body>
</html>
Here is the code.
<!doctype html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
}
iframe {
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.footer{
position: absolute;
width: 100%;
bottom: 0;
right: 0;
left: 0;
height: 50px;
background: black;
}
</style>
</head>
<body>
<iframe scrolling="no" src="https://onedrive.live.com/embed?cid=71689B83CE6D0B52&resid=71689B83CE6D0B52%217352&authkey=AOXRS7b8IrWU4Qs&em=2"></iframe>
<div class="footer"></div>
</body>
I wrote an html page, with some css in a separate file and it worked fine. Then i realized that i should add a doctype declaration to my html. I did that and my page was completely messed up! I tried all types of declarations but all ended up the same!!!
This is my html (currently only working with Chrome, and without doctype):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Luca Rood - Home</title>
</head>
<body background="images\background.jpg">
<div id="header">
<div id="header-back"></div>
<div id="top-spacing"></div>
<div id="content">
<a href="index.html" title="Luca Rood - Home">
<img id="image" src="images\logo.png" alt="Luca Rood">
</a>
</div>
</div>
</body>
</html>
And this is my css:
body {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
margin: 0px 0px 0px 0px;
}
#header {
position: relative;
height: 15%;
}
#header-back {
position: absolute;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
z-index:1;
}
#top-spacing {
height: 20%;
width: 100%;
}
#content {
position: relative;
width: 80%;
height: 60%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
z-index:2;
}
#image {
height: 100%;
}
Please help.
Thanks in advance,
Luca
You are having the classic percentage heights problem. To fix it, you must add height:100% to the body style and add an style on the html element that has height:100% as well:
<style>
body{
/*...*/
height:100%;
}
html{
height:100%;
}
</style>
Hope it works!
Try this above < html > tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I would like to put a box in the middle of the window with css, but it doesn't work. The html element's height doesn't seems to be 100% for example.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
body {
margin: auto;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
box
</body>
</html>
it's not a good idea to mess with html and body making it display: table-cell or something
instead, try this code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>box</div>
</body>
</html>
Try enclosing the box inside a div element. Resizing the body won't work. You should use the following code:
<body>
<div id="box">box</div>
</body>
And then your CSS should look like this:
#box {
position: fixed;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
border: 1px solid #000;
}
You can see a jsFiddle demo here.