I need to center a div (undefined width) horizontaly and vertically inside a fullscreen div.
I have the code below.
outer div:
background: #000 url('header.jpg') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%;
inner div:
left: 50%;
margin-top: -300px;
margin-left: -300px;
max-width: 600px;
position: absolute;
top: 50%;
z-index: 2;
But it is not clean - especially when I resize the window. And this is somehow not centered vertically.
Could you help me with this?
Thank you!
Don-t use position:absolute in this case. You don't have to use z-index because the child will always stay in front of the parent by default. It wasn't your case because the parent was relative and the child absolute and position:relative was giving a greater stacking order for the parent.
So, if your inner div is 50% width and height of the parent, write top:25% and margin:0 auto;
If it was 70%: top:15%; margin:0 auto;
html, body{
width:100%;
height:100%;
}
.outer{background: #000 url('http://lorempixel.com/g/400/200/') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner{
height:50%;
width: 50%;
position: relative;
top: 25%;
background:red;
margin:0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
The easy fix is:
<outerdiv><center><innerdiv></div></center></div>
but a margin of '0 auto' is the correct way to center the div
innerdiv {
margin:0 auto;
}
You can then adjust the top and bottom accordingly
Related
I am working on front end and I have attached a background image on the login page. I want to show 100% width and height of the screen to that image but with my codding there is a vertical bar which I want to remove. CSS code of my file is given below
.Public_background {
background-image: url("public_Background.jpg");
margin-left: auto;
margin-right: auto;
/*background-color: aliceblue;*/
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height:100%; */
height: 100vh;
position: relative;
max-width: 100%;
max-height: 100%;
}
This is the method I use for this propose
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I took it from here.
example
if you are using full screen div you can add this code to your div styling
.Public_background {
overflow:hidden;
}
Here is a working fiddle the scroll is because of gutter margin -:
body{
margin: 0;
}
.container{
width: 100vw;
height: 100vh;
}
.Public_background {
background-image: url("https://picsum.photos/600/300");
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="container">
<img class="Public_background">
</div>
Im trying to set a background image and set this to be full witdh but im only getting to see it centered.
.wrapper-hero {
width: 100%;
height: auto;
max-width: 1920px;
}
.wrapper-hero .hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat top center;
background-size: contain;
background-repeat: no-repeat;
display: block;
background-size: cover;
height: 800px;
width: 1200px;
}
<div class="wrapper-hero">
<div class="hero-image"></div>
</div>
Any ideas? And the image is not responsive at all...
You're using background-size multiple times. Try this code.
.hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat center center fixed;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to align an image at the bottom of my DIV, which happens to be the background. Just to make the case even more real, I also added some overlay (as that is how I am doing it in my project).
https://jsfiddle.net/jy0w2jmr/
background-size: 100% 100%;
That will make the background size 100% of the DIV, but not stretched out, so it will be 300px tall (if my DIV is 300px tall).
How do I make it, so when I resize the DIV, the background image also resizes, but sticks to the bottom of the DIV and NEVER overflows the DIV? background-position: bottom; does not seem to stick it to the bottom of my DIV.
Does this work for you?
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
#container {
width: 100%;
height: 300px;
background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
position: relative;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333;
opacity: 0.5;
}
<div id="container">
<div class="overlay"></div>
</div>
Good afternoon!
I am trying to make this work - I have one <div> with position: absolute and height: 100%; min-height: 100%; so height is auto. And I would like to place another <div> after this one, but I don't know, how many % should I use at margin-top, or which kind of position...
Here is my code, I would be glad for every advice! Thanks!
HTML:
<div id="content">
...text text text...
</div>
<div class="clr"></div>
<div id="copyright">
text text...
</div>
CSS:
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
background: url('bg_blue.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clr {
clear: both;
}
#copyright {
position: static;
margin: 0 auto;
width: 100%;
height: 200px;
background-color: black;
}
Yes It is possible easily by position: relative; and float: left;
I've solved it with position: relative; and float: left;
I am trying to setup a fluid template that I can use for responsive design viewports too. However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic. I have a main wrapper background and a header animated gif that are both the same width of 1200px. Any help would be greatly appreciated.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
css
body {
background-color: #B28D66;
margin: 0 auto;
}
#Wrapper {
max-width:1200px;
width:95%;
background-image: url(../img/background_main.jpg);
background-repeat: no-repeat scroll;
background-position: center top;
height: 2200px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Banner {
width: 100%;
height: 350px;
background-image: url(../img/animated-gif-header.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Content {
width: 75%;
margin: 0 auto;
}
#Wrapper #MainNav {
background-image: url(../img/nav_bar.png);
width: 100%;
height: 75px;
margin-top: -20px;
}
#Wrapper #MainNav ul {
margin-right: 100px;
}
#Wrapper #MainNav ul li {
float: right;
margin-top: 15px;
padding-right: 21px;
try using the background-size property in the following manner:
background-size:100% auto;
or use the below if you want to have its height covering the whole page height
background-size:auto 100%;
background-size: cover;
works just fine for me.
background-image: url('');
background: no-repeat center center cover;
This usually works fine.