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
Related
I'm trying to vertically center an element which uses padding-bottom to create the required aspect ratio (for a video). I want to have top and bottom black borders just like when a movie is displayed on a taller aspect ratio than it was filmed on:
body{
padding:0;
margin:0;
position:relative;
display:block;
}
main{
background: url(http://placekitten.com/1280) no-repeat center center;
background-size: cover;
width:100%;
padding-top:56.25%;
width:100%;
}
http://jsfiddle.net/y4tcufo5/ - test case
I have tried the top:50% ; transform:translateY(-50%) ; tricks on the element, but nothing seems to be working! I know it's to do with using padding instead of width and height, but I cannot seem to rig the element to the design any other way.
Is it possible to solve this problem with either:
Using the padding trick and another way of vertical centering the element
Ditching the padding and achieving aspect ratio through another means
Use flex box or something
Any help is much appreciated!
Vertically center anything with these four lines of code
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
Apply this to a wrapper of the element that you want to vertically center
(Demo)
HTML
<div class="wrap">
<main></main>
</div>
CSS
html, body {
padding:0;
margin:0;
height: 100%;
}
main{
background: url(http://placekitten.com/1280) no-repeat center center;
background-size: cover;
width:100%;
padding-top:56.25%;
}
.wrap {
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
}
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I am attempting to make the header/menu bar on this website static (fixed) so that it is always present at the top of the screen, and a particularly long website scrolls 'behind' it. I have accomplished this before on fixed width websites, but this website is fluid width and I have not been able to accomplish this yet without breaking the header.
Could someone potentially tell me where/what I need to edit in my CSS? I believe I need to add a position:fixed; element somewhere, perhaps in this section, but it doesn't seem to accomplish my goal in the same way as on a fixed width website.
.art-header
{
margin:0 auto;
background-repeat: no-repeat;
height: 170px;
position:relative;
background-image: url('images/header.jpg');
background-position: center top;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center top;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header-inner{
position: relative;
min-width: 840px;
max-width: 1920px;
width: 50%;
z-index: auto !important;
margin: 0 auto;
}
try this, merge your .art-header & .art-nav inside a div, and class fixed to it like this
<div class="fixed">
//div .art-header & nav .art-nav here
</div>
then add the css for fixed
.fixed {
position: fixed;
z-index: 100;
}
and make some margin for .art-sheet
margin-top: 241px; /*the height of the fixed div*/
here's the JSFIDDLE
Hi is it possible to place bg image to fixed position from the center of a page?
Yes it is possible. Use the Following code.
body {
background: url("yourimage.gif") 50% 50% no-repeat;
}
How about this:
FIDDLE
div
{
position:fixed;
top: 50%;
left:50%;
background: url(http://placehold.it/50x50) no-repeat;
width: 50px;
height:50px;
/*margin: offset here*/
}
Here, the top left point of the image is at the center of the page. You can offset this by adding a margin.
So in your case you need to offset it 100px right from center - so add margin-left:100px
yes,
{
background-position: center;
background-repeat: no-repeat;
}
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}