I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
Related
I am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.
What I've tried:
Making parent relative and child absolute.
Setting parent's min-height: 100%
Here is my code:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
Any ideas? Thanks!
Just apply width: 100%; to .ground to make the div take full width.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}
<div class='parent'>
<div class='ground'>footer</div>
</div>
I have a strange behavior when I'm using a CSS table and a black layer that is with position absolute on top of the table in HTML.
When the layer is enabled, (display: block), then it's destroying the layout. But when I disable is (display: none), everything is fine.
Here is a small example (you have to change the css through the developer tools). Is there something that I forgot to set, etc?
It's not possible to use flexbox instead of the table!
html,
body {
width: 100%;
height: 100%;
}
body {
display: table;
table-layout: fixed;
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 1265px;
display: block;
}
#sidebar {
display: table-cell;
vertical-align: top;
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
display: table-cell;
vertical-align: top;
background: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Updated:
I think your markup is wrong. Wrap the #sidebar and #content in another #container and give it a display:flex; and position:absolute; and a min-height:100%;. Flex's align-items:stretch; will make your sidebar and content stretch their height to the parent height.
Try like this:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
width: 100%;
min-height: 100%;
position: absolute;
flex-direction: row; /* children will fall side by side like columns */
align-items: stretch; /* children will stretch to my height */
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 100%;
display: block;
}
#sidebar {
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
flex: 1 0; /* Now I will take remaining space left by my sister Ms. #sidebar */
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I try to center the <input> element in the black <div> container, but it doesn't work. What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
An easy method is to set the position on the container to relative, then set the position on the input to absolute. Then just set the top/right/bottom/left of the input to zero, and margin to auto. No CSS3 transforms needed:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 60%;
height: 3em;
margin: auto;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
You need to use position: relative other than position: absolute, which is centering based on the entire screen other than the parent element. Note that this will make the top part of the input box in the center. You will need to move it up a little bit by half it's height.
...
main input {
position: relative;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
...
It should work with transform:translateY(-50%) and give the main div position:relative . Make sure to also include the different vendor prefixes.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position:relative;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
Make main position: relative
and your input position :absolute
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>