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;
}
Related
I inserted two background images to a div and gave them the top and bottom positions. However, the issue is that I want the images to have an equal top and bottom margin. I'm not sure how to accomplish it.
I want the background images like in the SS.
html:
<div class="license-info">
</div>
css:
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('/images/footerdiamondchain.png'), url('/images/footerdiamondchain.png');
background-repeat: repeat-x;
background-position-y: top, bottom
}
You can specify an independent background-position for each background image. So you could set them equal distance from top and bottom, respectively, via a rule like this:
background-position: center top 80px, center bottom 80px;
center top 80px sets the first image 80px from the top
center bottom 80px sets the second image 80px from the bottom.
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('//placekitten.com/50'), url('//placekitten.com/50');
background-repeat: repeat-x;
background-size: 50px;
background-position: center top 80px, center bottom 80px;
}
<div class="license-info"></div>
you can do like that.
<div class="license-info">
<img class="first-img" src="./first/path"></img>
<img class="second-img" src="./second-img/path"></img>
</div>
.license-info {
position:relative;
}
.license-info .first-img {
position:absolute;
top:50px// change this position
}
.license-info .second-img {
position:absolute;
bottom:50px;
}
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
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
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.