Hello on my login page I have a background image. Currently the image is centered but not centered the way I want it. I want it so the image is always centered in the middle of the screen. Curently, my image is centered but is positioned at the top of the page. The image need to be positioned in the middle of the screen, and kept centered.
login.html
<body style="background-image: url({{MEDIA_URL}}/admin_media/img/admin/bigstock_Photo_Showing_Financial_Growth_1339836.jpg); background-position: 50% 50%; background-repeat:no-repeat;">
may be you have write like this :
background-position: center center;
EDIT:
may be there problem with the body because it not takes screen entire height so if you want an image show in the center of the screen then write
html,body{height:100%;}
body{
background:url(http://www.poster.net/van-gogh-vincent/van-gogh-vincent-sternennacht-2601013.jpg) no-repeat fixed center center;
}
check the example http://jsfiddle.net/sandeep/m2fZs/2/
Instead of continuing to post comments, I thought it might be smarter to create a new answer.
Would something like this demo work for you? (replace 'fixed' with 'scroll' , if you want the img to scroll up and down with the page)
try it like this:
#element {
background-attachment:fixed;
background-position:center;
}
this should work!
Related
I am working on : http://brand-prestige.com/signup/
The problem I am facing is the logos scatters around doesn't stay at same place but goes behind the form while resizing the window.How can I make them stable?what cs do i need to use?
PLease help!
Try this:
background-position: center center;
background-size: cover cover;
Add this to your body element.
You need to centre your background image horizontally and align it to the top vertically. At the moment it's aligned to the top left as that is the default.
background: #EAEAEA url(../imgs/bg.png) 50% 0%;
Posting a jsfiddle would help people in getting an answer over to you.
But looking at your source code, try adding this for the effect you are after:
.authenty {
background-position: center center;
}
You can use background-position:center on the .authenty class. This will make the logo background stay in place and goes around your form.
I am very new to HTML/CSS. I am building a website for the Sheriff's office I work for, and am having an issue.
The website has a fixed div on the left side of the page, that includes all of the links. The content is on the right, and is designed to scroll, however I want the left div (links) to always remain the same. I designed the site on a laptop, and so far its working fine on that, however when viewing the homepage on a desktop, the left div doesnt stretch all the way to the bottom.
Here is the link: http://www.mlpropmgt.com/sheriff3/index.html
I used percentages, thinking that would make that left div always stretch to the bottom of the screen, however it didnt seem to work.
Any help would be much appreciated!
from what I gather viewing the code in your webpage you did all the right things, and the leftbar is 100% height, however the image you used as a background is not, css does not stretch the image unless you tell it to do it, you can use
.leftbar{ background-size: cover;}
or use an image that is big enough to account for the extra height in a desktop, keep in mind that Imac's hace 1440px window height
Since you have 2 divs do this
<div id="Main_div">
<div id="left_div">div 1</div>
<div id="Right_div">div 2</div>
</div>
css
#Main_div
{
border:1px solid red;
height:100%;
width:100%;
position:fixed;
}
#left_div
{
border:1px solid black;
height:100%;
width:40%;
float:left;
position:fixed;
}
#Right_div
{
border:1px solid blue;
height:100%;
marigh-left:41%;
float:right; // or its not needed
}
let us know
give height of the div as 100% (height:100%;) then set position:fixed;
it will works fine
Hi righ now your left side it has 100% height so is working the div is streching all the way to the bottom. The problem is the background image. The background image is smaller than a desktop window height so that's why it looks like is not streching all the way to the bottom.
Possible solutions:
Change the background image to a bigger one that just have the "background", and put another two images with the sherif star and the sheriff's logo/name with a absolute position so they will look like background images.
You can add the following to your leftbar div. The problem here is that the image is going to strech and at some point you are not going to be able to see the complete logo/name
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I want to centre a banner image of size 1920x225px in a div 960px wide.
the problem occuring is that the image is not in the centre as it starts from top left.
Heres an image to describing the issue
http://tinypic.com/r/scco0m/5
Try using
background-position: center center;
on your background image.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You did not mention here, how you adding he image in a website
if you are giving background image
give css like this background:url(../image.jpg) center center no-repeat;
If you don't want background image just give max-width:100% for that image
New Answer.
You need to give position:relative for the div having width:960px
and for the image add like this
img{position:absolute; left:50px; top:20px; z-index:999}
You can change the Left and top value according to your Wish
I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.