Absolutely True Centred Background Image

Centering a background image, using CSS

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

That should work.

If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.

Other than that try:

background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Large centred background image

One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:

DEMO

As far as I'm aware this is supported on IE6+

Center one background image over the other in CSS

You need to correct your JS, you are specifying background which will override all the background properties specfied in the CSS. So instead use background-image to keep the CSS properties:

var divElem = document.createElement("div");
 divElem .setAttribute( 'style', 'background-image: url( "caution.png" ), url("background.png")' );
 divElem .className = "imgPin";

Then you may need to adjust the CSS if you still have alignment issue:

• Use background-size:cover or background-size:contain to avoid the icon to stretch or simply don't specify any size to keep the original ones.
• Add background-position:center in order to center both icons. You can also specify values in order to control position like this background-position: 5px 10px,10px 5px (works also with % values).
• Then specify background-repeat:no-repeat (only once and it will affect both images)

How can I position a background-image an absolute distance from the right of its container?

Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):

background: url(...) no-repeat right 50%; border-right: 4px solid transparent;

Of course, if you are already putting a border on the right, this will not help you at all.

Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:

.yourContainer {
  position: relative;
}

.yourContainer:after {
  content: ' '; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 4px; 
  width: 10px; //icon width
  z-index: -1; //makes it act sort of like a background
  background: url(...) no-repeat right 50%;
}

Android: how to have a centered background image in a view

You have two choices:

1. Make the image bigger. Specifically, add a single black line all around its edges, then use the tools/draw9patch tool to make that black line the 'stretchable' part. When the image is scaled up to the background, your original icon will not be stretched.

2. Give up on the android:background and use a top level RelativeLayout instead. This should work

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageSwitcher
        android:id="@+id/ImageSwitcher01"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content"
        android:background="@drawable/icon">
    </ImageSwitcher>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
        <TextView
            android:text="Your old top level here"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content">
        </TextView>
    </LinearLayout>
</RelativeLayout>

Hope this helps

---

Related Topics