I have my "header_main" positioned absolute with a height of 100% to basically cover the entire screen. Inside the header_main div n have another div positioned absolute as well. I have set the "icon-wrapper" div to bottom:0; but it does not want to position absolute bottom.
<body id="top" class="no-js">
<header id="header_main">
<div class="icon-wrapper"></div>
</header>
</body>
My CSS:
html, body {
height: 100%;
}
body{
font: 18px/27px $font-stack;
color: $text-color;
-webkit-font-smoothing: antialiased;
font-weight: 300;
}
#header_main{
height:100%;
width:100%;
position: absolute;
background: url('../images/ac-placeholder-img.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
vertical-align:bottom;
}
It can be done by giving top:100%; to the icon wrapper it will be always to the bottom of the header_main check out the working demo below;
#header_ main{
height:100%;
width:100%;
position: absolute;
background:#ddd;
}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
background:red;
top:100%;
vertical-align:bottom;
}
<body id="top" class="no-js"> <header id="header_main"> Scroll Down<div class="icon-wrapper">ww</div> </header> </body>
.icon-wrapper is being aligned to the bottom, but its content is not, because the display value of absolute-positioned elements is always table or block, and vertical-align applies to inline or table-cell elements only.
Use the wrapper for the absolute positioning only, and add another element to handle the vertical align:
CSS
.icon-wrapper {
position: absolute;
bottom: 0;
}
.icon {
display: table-cell;
vertical-align: bottom;
height: 254px;
}
HTML
<div class="icon-wrapper">
<div class="icon">
</div>
</div>
Fiddle
You need to set the width for the absolute positioned div.
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
vertical-align:bottom;
width: 100%;
}
Related
I have 3 sections that their parents is only the body, section 2 (menu) background in this case is larger than 100vh. Giving the height:auto; won't work, I would like to stretch the height of the section according to the background length ( auto ), I don't want to give it a specific value using ( px, vh, cm, ... etc). I'm pretty sure it's simple answer but I couldn't figure it out my self. Thank you
html,body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(/images/Header.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
height: auto;
width: 100vw;
background-image: url(/images/Menu.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<html>
<body>
<section id="Home"></section>
<section id="Menu"></section>
<section id="Map"></section>
</body>
</html>
The only way you can achieve this is by not using the actual background property.
As #Mr Lister commented:
There is no way for an element to know the height of a background
image.
However, you can use an img tag with the image you want as background inside your #menu section.
Then, create a container div with absolute positioning which will contain the content of your actual section.
html,
body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(http://i.imgur.com/8tcxHWh.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
width: 100vw;
}
.content {
position: absolute;
left: 0;
top: 0;
}
h2 {
color: white;
font-size: 4em;
}
<section id="Home"></section>
<section id="Menu">
<img src="http://i.imgur.com/BF3ty6o.jpg">
<div class="content">
<h2>My content</h2>
</div>
</section>
<section id="Map"></section>
I am trying to create a simple responsive splash page with a background image and a div on top.
I have managed to get the responsive background image. This works well.
Now I am having issue placing a div on top of this background and making sure it follows the resizing properly.
I have set percentage margins for this div but it's not keeping the percentages, also if I make the window too small then the div disappears completely.
How can I fix this problem?
Thanks a lot for your help.
Guillaume
The address:
http://b-tees.net/testsplash/
My html:
<div id="bg">
<img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>
My CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}
My suggestion is to use like this : Demo
instead of the method you are using atpresent
CSS:
html, body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
}
.bg_img {
background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
#selector {
display:block;
vertical-align:middle;
text-align:center;
margin:0 auto;
width:50%;
}
HTML:
<div class="bg_img">
<div id="selector">Test test test..
</div>
</div>
This is my website coding and I am already running into problems, please help!
This is my CSS style sheet:
.center {
position: absolute;
left: 50%;
}
body
{
background-color: #45a8e1;
background-image:url('images/background.png');
background-repeat:repeat-x;
}
And then here is the HTML:
<body>
<div id="header" class="center">
<img src="images/header.png">
</div>
</body>
The final results are coming okay but the page is extremely wide. I am trying to fit my background image in the view-port (page). Also, I want to center my div in the center which doesn't seem to be working since the page is so wide.
Use this css:
.center {
display:inline-block;
margin: 0 auto;
}
body
{
width: 100%;
text-align: center;
background-color: #45a8e1;
background:url('images/background.png');
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
background-repeat:repeat-x;
}
Note: background-size is not supported in IE8 and below.
Try this -jsFiddle
#header {
background: url('/*yourImageHere*/') repeat-x center;
height:200px;
width:100%;
}
The div tag has a background image and i wanna put the overlay on the main tag's background-image and the rest of contents over both of them. But The following code will put the overlay tag over the conent.
HTML:
<div id="nav-section">
<div class="overlay"></div>
<div class="container">
<p>test</p>
<h5>test</h5>
</div>
</div>
CSS:
#nav-section{
background-image: url('../img/1.jpg');
background-position: top center;
background-size: cover;
position: relative;
}
#nav-section .overlay{
position: absolute;
top: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.9);
z-index: 1;
}
#nav-section .container{
height: 600px;
}
#nav-section .container ul li{
float: left;
}
Thanks in advance.
Make the #nav-section .container have an position relative or absolute with a z-index that is higher than the overlay.
use z-index.
give #nav-section .container z-index that is higher then the div you want him to over lay.
I have a div I would like which I have placed at 25% from the top. However, the 25% are computed with respect to the size of the background image and not with respect to the size of the visible screen. How can this be fixed?
Update: now the top margin works, but not the left one :(
Any clue?
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-size: auto 100%;
background-attachment: fixed;
overflow: hidden;
align: center;
}
#container {
background-color: #ffffe4;
position: absolute;
width: 776px;
height: 400px;
top: 25%;
margin-left: auto;
text-align: center;
overflow: auto;
}
1) use absolute positioning:
#myDiv { position: absolute; top: 25%; }
2) make sure your div is not within another positioned element (if you're not sure of this, just put it just inside the <body> tag, nothing else)
use css property:
div#myDiv {
position:absolute;
top: 25%;
}
on the dive that you want placed 25% from top of visible screen.
if you use relative position then the percentage will be calculated from the parent element.
if you use absolute position the percentage will be calculated from the size of the screen.
So try to using position absolute instead of relative.
edited answer for comment, just add extra div with id wrapper and change postitions, see example below:
<html>
<head>
<style type="text/css">
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-attachment: fixed;
overflow: hidden;
text-align: center;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
}
#container {
background-color: #ffffe4;
position: relative;
margin:0 auto;
width: 776px;
height: 400px;
top: 25%;
text-align: center;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
bla bla bla
</div>
</div>
</body>
</html>