I'm trying to place a clickable image in the center using padding.
The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.
If I remove padding it works but then the image isn't were I want.
Is there a way to fix this?
My HTML:
<body>
<div class="page">
<div class="body">
<div id="clicktoenter">
<h1></h1>
</div>
</div>
</div>
</body>
My CSS:
.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}
.home{
margin-bottom: 10px;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
padding:200px 200px;
}
.home:hover{
background:url(../images/imageclick.png) center center no-repeat;
padding:200px 200px;
}
Change your margin to this and it will center, not using padding.
.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
You have fixed width of block element, so you can to use auto left/right margins to center this block:
.home{
margin:200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
If you really want the clickable image to be in the middle of your screen, then forget the padding and just center the h1 the image is in.
#clicktoenter h1 {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>
I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle
In my Jumbotron, I would like to have some text pinned to the bottom left corner of the Jumbotron. I have some max-width & max-height properties that I think might be the issue, but i'm not really sure. I've gotten it sort of in the code below, but when the page is resized it the text moves off of the Jumbotron or positions all wonky.
HTML:
<a href="#">
<div class="six">
<div class="col-sm-4">
<div class="jumbotron">
</a>
<h5>Text</h5>
</div>
</div>
</div>
CSS:
.six .jumbotron
{ background: url("Img") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:250px;
min-height:260px;
max-height:300px;
margin: 0 auto;
margin: 3em auto;
}
` .six .jumbotron > h5{
position:absolute;
color:#000;
left:10px;
bottom:10px;
font-size:15px;
}`
It's because you position the H5 absolute to the page and not to the element, to fix it do this: Fiddle here:https://jsfiddle.net/agc3e3yp/2/
.jumbotron h5{
margin-top:90%;
left:10px;
font-size:15px;
color:#fff;
}
Note the text will still move around, but that is because the parent element is changing size when you change screen size. but now it will stay inside the box at 90% of it's height. Best bet is just put your text in a div and style it yourself.
Let me know it works for you :)
I have the following css on an element in my html. It centers the image horizontally but its not at the bottom of the page where i need it to be. How do i change this css to keep it centered horizontally but make it position: fixed to the bottom?
background: url(loginv1.png)50% 50% no-repeat;
background-size: 75px 25px;
height: 40px;
width: 120px;
display: block;
margin: 0 auto;
http://jsfiddle.net/Le7yP/15/
div {
background: url(http://snag.gy/z01qo.jpg) 50% 50%/75px 25px no-repeat;
height:40px;
width:120px;
position:fixed;
bottom:0;
left:50%;
margin-left:-60px;
}
The background positioning format is:
background: url("...") horizontal vertical;
Therefore, specify your background as follows:
background: url("loginv1.png") center bottom no-repeat;
background-size: 75px 25px;
Here is a JSFiddle example.
Try this:
background: url("loginv1.png") center bottom no-repeat;
This will place the background image at the center horizontally, and at the bottom vertically.
Fiddle
In Html I've this code
<div class="page">
<div id="header">
...
</div>
</div>
And here is my css
.page {
width: 1028px;
background-color:#103250;
margin-left: auto;
margin-right: auto;
}
#header
{
background:url('/Img/SubpageBox1.png') no-repeat top;
height:150px;
padding-top:50px;
}
But now my background-image is placed out of div... On the top of the page... How can I place it on the top of the header?
You can specify the position of the background image:
background:url('/Img/SubpageBox1.png') no-repeat center 50px;
or using background-position css property.