I am trying to center a div inside another div.
I have tried the following HTML and CSS
HTML
<div class="header">
<div class="homeImageText">
<h1>Document Preparation Like Never Before</h1>
</div><!--homeImagetext end-->
</div>
CSS
.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}
header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Live
jsfiddle
Demo Fiddle
For vertical centering, make the wrapping div set to display-table and the child to display:table-cell with vertical-align:middle. Horizontal centering can then simply be accomplished with text-align:center;
Try the CSS:
.header {
height: 600px;
display:table;
width:100%;
}
.homeImageText {
height:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}
Related
I'm building a simple website right now and faced a small issue. How do I align picture (iMessage text with blue bubble) in the center of the screen so and place a text in the bottom left corner of the image (text is Read + time)?
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<head>
<div>
<img src="myimage.jpg"></img>
</div>
</head>
But how do I add text in the bottom left corner right below the image?
Something like this might work for you...
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<div class="centered">
<img src="myimage.jpg"></img>
<p>tester</p>
</div>
</head>
Although I completely agree with Temani, there are lots of resources on centring such as the links below:
css3 pr align-self
how to css image center
css align
Do you want to set your image in the center of screen Or in the center of a div?
If you want to set it in the center of screen horizontally then you shoud set
margin-left:auto;
margin-right:auto;
And if you want add text on image, you shoud set that image in the background of a div and add text in that div wherever you want
.imgdiv{ background: url(your IMG url) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px; width: 300px;
}
.imgtxt{
left:0; bottom:0;
}
<div class="imgdiv" >
<span class="imgtxt">Your text</span>
</div>
Here is my tried css;
css:
.main
{
width: 65%;
background:url("../slice/body-bg.jpg");
display:block;
float: left;
margin-left: 0px;
min-height:100% !important;
height:auto;
padding: 0px 12px;
}
Here is sample output screenshot: http://s18.postimg.org/q5zi9g7mh/untitled.jpg
I used in html {height:100%;} and
.main {min-height:100%; height:auto;}
But still it didn't work for me.
Can anybody help me to fix this?
Any help would be highly appreciated.
Thanks.
See example: fiddle
HTML
<div class="main">123</div>
CSS
html, body{width:100%; height:100%;}
Just use:
html,
body{
height:100%;
}
.main{
height:100%;
}
Adding height:auto; after height:100%; superceeds it.
add background-size:cover
.main
{
background:url("../slice/body-bg.jpg") no-repeat center center fixed;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the HTML element (better than the body as it's always, at least, the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
just try this:
html {
background: url("../slice/body-bg.jpg") no-repeat center center fixed;
background-size: cover;
}
I'm new on Stackoverflow, and i need help with these problem.
So the problem is: I want this dashed image height to 100% of the container.
HTML
<div id="test1">
</div>
<aside>
<?php
if (logged_in() === true) {
include 'includes/widgets/loggedin.php';
} else {
include 'includes/widgets/login.php';
}
include 'includes/widgets/user_count.php';
include 'includes/widgets/sponsors.php';
include 'includes/widgets/partners.php';
?>
</aside>
CSS
aside {
width:260px;
float:right;
background-image:url(../images/dashed.png);
background-repeat: repeat-y;
padding-left:15px;
}
#container, footer {
background:#fff;
width:1100px;
margin:0 auto;
padding:20px;
}
#test1 {
height:1000px;
}
Can anyone help me?
Try this:
aside {
background: url(images/bg.jpg) repeat-y center center fixed;
padding-left:15px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?
Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/
Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/
I have one div overlaying another div as follows:
div.container {
position: relative;
min-height: 100%;
margin:0;
padding:0;
background:url('http://www.scratchprogramming.org/img/book.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 62% 70%;
overflow:hidden;
}
div.content {
position: absolute;
min-height: 100%;
margin:0;
padding:0;
top: 0;
left: 0;
width:100%;
z-index:10;
overflow:hidden;
}
My html starts out like this:
<div class="container">
<p id="catImage">
<img src="img/Scratchcat.png" alt="cat" />
</p>
</div><!--container-->
<div class="content">
Now I had to set the height on the cat image really long so that the background image in the container (book.png) will fill the content area.
The problem is when testing on different browsers... somtimes the book.png background goes over the content length, leaving a couple of inches extra on the bottom.
Is there any way I can make the content and container height the same using css and not having to play around with the image height ?
Here is the working example: http://www.scratchprogramming.org
I came up with a solution very similar to this:
How to make one div's height depended of another div's height?
Thanks, everyone.
Try this:
body {
background: url('http://www.scratchprogramming.org/img/book.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale')";
}