Positioning an image in the centre? - html

I am struggling to position an image that I am using as the background as auto. I also have an article tag that will not centre.
How do I fix the issue with the following code?
body {
background:url('index1.jpg')no-repeat;
width:auto;
}

Try this:
body {
background: url('index1.jpg') no-repeat center center;
background-size: cover;
}
This should center your background image and resize it accordingly. Hope this helps.
EDIT (Pertaining to your comment):
First off, in order to obtain a border on an element you use the border, not border-radius. border-radius will round the edges of an element rather than add a border itself.
In order to center objects you need to use margin: auto;. This will place the content in the center of its parent container.
Here is a fiddle of the working code: JS Fiddle
In the future please attempt to do a little research and figure things out on your own. All of these solutions could be found on existing questions on SO.

Related

Background Image Issues - Set height?

I'm setting a background image on a page, but for some reason, the image is ONLY showing if I had a height. I don't want to set a fixed height though.
Any thoughts?
<div class="thinkBPG content"></div>
CSS:
.thinkBPG.content {
background: url(./home-blueprint.png) no-repeat center center fixed;
}
Ignore this.
I needed to remove the center center fixed.
I told you it was something silly.
The issue is because the content within that div is floated, so you need to tell the browser you want that div to contain it's floated contents. There are a few ways to handle this...you can float that div, you can put overflow on it, or you can use a clearfix solution.
Simplest way without introducing a lot of new code is to simply take off the height, and then add
float: left;
width: 100%;

CSS Background-position relative to document not element?

I'm wondering if this is possible, the ability to set the background position of an image to the top left of the html document, not the top left of the element it's the background of.
Psuedo-code
body {
background-image: url(someurlhere);
background-position: top left;
}
element {
background-image: url(sameurlhere);
background-position: top left /*Relative to body not element*/;
}
If I need to provide anything else to this question let me know and I'll amend it, but I'm sure it's pretty straight forward.
Edit: I can't use absolute positioning, I'm loading dynamic content and I want a tiled image to fit the background of several elements to make the illusion of holes in the page.
Edit 2: Here are some pictures to better explain the problem.
Picture 1: Notice the repeated pattern in the header elements. http://i.imgur.com/3lWguRE.png
Picture 2:This variation is what I aim to achieve. http://i.imgur.com/WtOeCQ2.png
The first question would be why you are not just setting the background image on the body element.
But if that's not appropriate, you have the option to set a background image on an element to fixed, in which case it will be fixed to the top left of the browser window and won't scroll.
element {background: url(image.fig) repeat fixed;}
However, the background will only show on the element it's attached to, even though it starts at the top left corner of the screen. (This is handy for parallax effects.)
EDIT: As a side note, if you are using the longhand background properties, fixed is set with
background-attachment: fixed;
All you have to do is wrap your element in a div absolute, and position it as you wish.
Can you provide some more information on the context of the element? Does it have any positioning set? Where is it in the document? It's a little unclear to me what exactly you are trying to accomplish.
Would putting the background on the body work?
This would set the background at the top left, but I doubt this is actually what you are trying to accomplish:
<div class="test">
</div>
.test:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://i1112.photobucket.com/albums/k497/animalsbeingdicks/abd-318.gif);
width: 352px;
height: 263px;
}
http://jsbin.com/imurah/1/

Static/fixed background image while page contents scrolls?

I'm trying to follow a guide located here to know avail :(.
Here's a link to my JsFiddle: http://jsfiddle.net/gF7Af/1/
For background; I'm attempting to make it so that the background image stays in the same position while only nested contents of #container scrolls, so that the background image is always shown and doesn't have any white-space (edges) when the contents nested in #container has a combined height larger than #container's.
Any help would be greatly appreciated!
Thanks!
write background-attachment instead of background-position Like this:
body {
width: 1000px;
background: url(http://www.tropicalparadise.net/images/dest/mauritius1.jpg) top right no-repeat;
background-attachment: fixed;
}
Check this http://jsfiddle.net/gF7Af/3/
Try this http://jsfiddle.net/gF7Af/2/
I moved 'fixed' into the bg declaration and it seems to works for me.

Why won't my transparant 'second' background image center?

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.

Separate background images at top and bottom of site?

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.