I have a background that repeats and positions like this:
body
{
background-image: url(images/background.jpg);
background-repeat: repeat;
background-position: 50% 50%;
}
This works fine. Now I want to center the content of the page. If I have a image that is 1000x560px I would like it to be aligned to match the background that is now centered in the browser.
Best approach?
for you content div you can use position:absolute . write like this:
.content{
width:1000px;
height:560px;
top:50%;
margin-top:-230px;
left:50%;
margin-left:-500px
}
If you now have your centered background image applied to the body tag, you could declare a container to then sit in the center of your page like so:
#container {
width: 1000px;
height: 560px;
margin: 20% 0 auto;
}
This could create a container sitting directly over your background and will re-size depending on the size of your window. The only thing i cant work out for you is the top margin percentage, you might have to play around with this to get it correct. In this case i have declared it as 20%, also note i have only tested this in FF
Let me know how that works out and if ive understood you correctly.
Cheers
Related
.step-1-4 {
background:url('../images/gadget-4-sprite.png')
no-repeat; width:950px;
height:70px;
margin-left: 15px;
}
Above is the CSS for a div I have which holds a background-image. I have set the height and width of the div the same as the dimensions of the image. The problem i'm having is when the window is re-sized for example less than the width of the image, it gets cut off.
Is there a solution whereby I can style the CSS in such a way that the div re-sizes along with the image inside it. I have tried making the width of the div 100%, which re-sizes the div correctly, however the image still does not re-size. Maybe if this is not a good solution, then how can this be achieved using an <img> tag.
use background-size:cover; or background-size:100% 100%;
so your css will be ::
.step-1-4 {
background:url('../images/gadget-4-sprite.png') no-repeat;
background-size:100% 100%; /*..or cover ...*/
width:950px;
height:70px;
margin-left: 15px;
}
I want to create an header image for my website.
I would like the image is always in the middle would have standing. When someone's browser reduced, the image in the center stand. Now I have an example that this site contains only get there no matter how this is done.
http://aarkcollective.com/
#Leeish has the right idea.
Another way is to use the following css
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* half of the height of the header */
margin-left: -150px; /* half of the width of the header*/
}
With the HTML:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [whatever]%;
}
As long as your image/div has a fixed width or percent so it scales, it will stay centered with a left and right margin of auto. This is probably a duplicate question so you should probably look around for another answer.
EDIT
I am editing my answer based on your comments. I made this fiddle to do what I was talking about. http://jsfiddle.net/P8eDT/ I put two divs in it. One with an image and one without so you can see. The inner div is flexible width, set height, and stays centered. The image inside the second one is "responsive" in that it will always match the width of the div. As far as I can tell this is exactly what they are doing in your example site you posted. Posted below is the code for the INNER div (The one that is the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please note you will need a javascript fall back for older versions of IE that do not support background-size:cover. I've done this before and I just use javascript to measure the width/height and which ever is longer I just set that one.
you can use position:fixed in your css
say that your header has a class of .header and a width and height of 800x50
in your css try:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
edit if you do not want it to center vertically Leeish has the better solution
Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.
I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:
This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:
<style>
.specialImage{
position: absolute;
bottom:0;
right:0;
z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />
The problem with this is that if the page is longer than the screen, this happens:
No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.
Route 2: the CSS background solution. Unfortunately, this code doesn't work:
body {
color: #333333;
background:
url("/static/assets/img/fabric_1.png"),
url("/static/assets/img/stain.png");
background-repeat: repeat,
no-repeat;
background-position: 0 0,
right bottom;
}
So, I tried this:
html{
background:
url("/static/assets/img/fabric_1.png");
background-repeat: repeat;
background-position: 0 0;
}
body {
background:
url("/static/assets/img/stain.png");
background-repeat:
no-repeat;
background-position:
right bottom;
}
Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:
Sonofabitch!
So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.
StackOverflow elders, what should I do?
Thanks!,
R
As I understand you want to stick background image to bottom and right?
so solution is:
body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Hmm, with css3 you can use multiple backgrounds. Can you try this?
html{
background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
background-repeat: repeat, no-repeat;
background-position: 0 0, right bottom;
}
body {
color: #333333;
}
Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:
body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}
body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
Shorter pages are forced to the viewing window height and longer pages picks up the auto height.
You could always set the height of body to 100% then it should work.
To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:
html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}
Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.
The purple square is the html-background-image and the reddish is the body-background-image.
Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.
Here's my div structure:
<html> Background image
<body> Padding
<div id="outerWrapper"> Background applied outside content
<div id="borderWrapper"> Contains content
<div id="contentWrap"> Sets up container positioning for child elements
I would do the following:
I have a background image (top center) and I would fill its middle-bottom with content. I would do something like http://glocalventures.org/ . Note: it's resizable!
How can I make something like this? I use Zurb Foundation as CSS Framework.
Thanks!
I am not really sure what you are asking here. I am assuming you are talking about making a background-image similar to this site?
To control your background-image / background position via CSS. You can do something like this:
body {
background-image:url(../images/bg.jpg);
background-position: top center ;
background-repeat:none;
}
or you can use pixels
body {
background-image:url(../images/bg.jpg);
background-position: 100px 100px ;
background-repeat:none;
}
or if you want percentages
body {
background-image:url(../images/bg.jpg);
background-position: 50% 50%;
background-repeat:none;
}
to make it resizable you can use this CSS property:
background-size:100% 100%;
*Note This is a CSS3 property and will not work in some older browsers.
If this isn't what you are looking for. You can right click on their site view their CSS via source code and see how they are doing it.
Set the image to top, centre:
yourImage{
background: #ffffff url(../images/bg.jpg) top center no-repeat;
}
Set where the text goes:
yourText{
position: absolute;
bottom: 5px;
text-align: center;
}
and the HTML code for this:
<div id="yourImage">
<p id="yourText">some text...</p>
</div>
I'd like to put an image as the background of a webpage but have it offset by some number of pixels with respect to the center.
How can I do this?
I want:
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
but instead of 25%, I want something along the lines of "center - 50px". Is there any solution to this?
I believe I have a solution that achieves what you're wanting:
A background image (specifically a page background) offset by a number of pixels with respect to the center.
This works using only HTML & CSS - no javascript required.
Update
This can now be easily achieved using background-position and calc as a CSS unit.
The following CSS will achieve the same outcome as the previous solution (see "Original Solution" below):
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
Note: Don't use this method if you require support for legacy versions of IE.
Original Solution
#background-container {
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
}
What this does is moves the entire container horizontally by the amount specified (in this case to the left 100px). Because the background image is centered relative to the container it moves to the left with the container.
The padding fixes the 100px of blank space that would appear to the right of the container as a result of the move. Background images show through padding). Because browsers use the border-box value instead of the default content-box value to calculate background sizing and positioning, the background image is effectively moved back to the right 50px - half the distance of the padding. (Thanks to ErikE for clarification).
So your offset/padding must be twice the required offset distance.
I have prepared a sample page for you here:
http://www.indieweb.co.nz/testing/background-offset-center.html
Have a play with resizing the window. You will see that the purple and blue background image (laid over a deeper background image marking the center of the page) remains exactly 50px (half the offset/padding distance) to the left of the page center.
Using background-position: center; is the same as background-position: 50% 50%;.
So you can use calc to do some simple math in CSS as a replacement for any length value, for example:
background-position: calc(50% - 50px) 50%;
Will center the background image, but shift it 50 pixels to the left.
So you want it centered by shifted 50 pixels to left. I would add the 50 pixels to the image in the form of a transparent space, unless you are dealing with absolute dimensions.
There's no obvious CSS answer. You would either need to use JavaScript to calculate values or do something tricky. You can try keeping the background-position:25% center and adding position:relative;left:-50px or margin-left:-50px but those might not work depending on how you are using the DOM element.
The only method I've found for this is to have the background inside another div, then use javascript to reposition ...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
if you know the width of the image you can use this:
background-position: (BgWidth - 50)px 0px;
Note that you can't have it like that, i.e. you need to calculate (BgWidth - 50) and then write the number there.
If you don't know the width you can use Javascript(with-or-without jQuery) and then use this:
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
Nice answer Luke,
one more thing, if your block width is larger than screen resolution, your must put your block in another container and do this:
#container{
position:relative;
overflow:hidden;
}
#shadowBox{
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
position:absolute: /*this is needed*/
}
My answer gotta be too late but somehow I've found another solution.
padding-left: 100px; /* offset you need */
padding-right: 100%;
or
padding-right: 100px;
padding-left: 100%;
The examples have the same effect.