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.
Related
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.
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>
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.
http://jsfiddle.net/stapiagutierrez/hfhfp/
For example, I'd like the user to scroll down, but the image to not move.
Any suggestions to my CSS?
Similar to http://www.mobafire.com/ where the picture is set, but the scrolling doesn't move it.
You need to assign backgroun-attachment property to fixed for body element.
i.e:
body{
background: url('http://i.stack.imgur.com/6C5Ym.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
Check jsFiddle#: http://jsfiddle.net/hfhfp/2/
Add fixed to the background properties like so :
body{
background: url('http://i.stack.imgur.com/6C5Ym.jpg') fixed no-repeat;
}