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
Related
I have an tag which stays at full height on mobile but the width is dropped (which is what I want). Now how do I centre this image? I have tried:
margin 0 auto
text-align: center
None if the usual image centring methods seem to work. You can view the image below:
http://helenshill.com.au/beta2/shop/
I have added:
width: 100%;
Which centres the image but also skews the dimensions. I want the image to maintain aspect ratio but be cut off and be centred.
Give this a try
CSS
.product img{
max-width:100%;
}
Hope this Helps...
I'm making a website with bootstrap's Carousel.
I wish that when the window size is reduced the image in carousel cut equally both left and right margin. How can I do it?
I've used overflow: hidden in the css to cut the image but but is reduced only in the right margin!
Sorry for my bad English, hope to find a solution with you.
Make sure that the image position is centered then when the image is resized, the image will be 'cut' from both sides.
img{
background-position:center;
}
I'm creating a one page website with an image that covers the entire background (and stretches proportionally with the window). For this I'm using a "background-size: cover;"
Now, when I'm resizing the window to the smallest size it let's me, the background image seems to anchor to the default top left corner.
Is there any way for me to change the anchoring location to top right?
try change your css code to be like this:
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
Here the demo: http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
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!
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.