is there a way to dont move background of a webpage while scrolling down?
I dont know how to do it, maybe using PHP, CSS or javascript?
Thbaks
body
{
background-image:url('mybackgroundimage.png');
background-attachment:fixed;
}
Related
I am trying to get my background to behave the same way as http://www.gamestop.com's background but everything I have read and tried doesn't work right.
Here is the CSS I currently have and I feel like it just needs to be tweaked a little to make it respond the way I want it to:
html{
background: url('../images/fbg.png') no-repeat center center fixed;
background-color:#000;
}
It is supposed to be fixed at the top of the page, centered, and all overflow should be hidden on the image to where if you were to zoom out it would simply show more of the image on the sides but remain fixed at the top in the same spot. I also would like to make it so that this background is click-able like a link and haven't been able to find anything about that either..
The site that it is going on is http://www.hackersarchive.com/beta.
Thank you for all of the replies! I figured it out & it was right in front of my face! Thank you for everyone who did answer the question for me as well!
Here is the correct code I was looking for:
html{
background: url('../images/fbg.png') no-repeat center top;
background-color:#000;
}
Simple issue that was more of a hassle than it should have been.
I am using SiteBuilder to make my website marsya.com, and I inserted a code snippet into the header & body of my page (I didn't know where it should go so I put it in both places) that allows me to have a fixed background image. Hooray!
The problem is, while my navigation bar & location info are where I want them when I am zoomed at 100%, if the zoom or screen size are different my nav bar & the rest of that table row get lost in background image.
I would like them to either stay static are relative to the background (my first choice) or to just stay at the top of the page and not scroll along with the rest of my content (second choice) (I tried to post images of what I am describing, but I don't have enough reputation points)
Help! Oh, and in case you hadn't guessed by my use of SiteBuilder (and the fact that I don't know if the background image goes in the header or body), I am not a programmer. So, if you could make your advice as clear and 101 as possible, I'd appreciate it :)
marsya.com
To make an element not move along with rest of the page you need to add below styling to your .css file-
#ELEMENT-ID{
position:fixed;
}
If you look at this section below (I assume you added this code for the background image):
<style>
body
{
background-image:url('http://www.marsya.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
Change where it says:
background-position:center;
Change to
background-position:left top;
This will make the position fixed to the top left and the image won't resize when the browser is changed in size.
I'm trying to position an image on my website that is wider than the resolution, which creates a horizontal scroll bar every time. I know someone who has a site with an image wider than the screen but his site doesn't cause you to scroll.
Does anyone know a code or a fix to the code that I can add to make the page unscrollable horizontally?
Thanks!
Add overflow-x: hidden to your <html> tag, or set the image as background-image instead, if the image is for design purpose and no content.
body {
overflow-x:hidden;
}
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?
For some reason the background on my website is not loading fully. Randomly, not all the time, the website will load with white rectangles around the content of the website. Check out this screenshot to get a better picture, or visit www.thinkitpostit.com to see if it randomly happens for you. Thanks in advance!
I see you are using a
width:800px;
on your body tag.
This could possibly cause some trouble since the background color is placed on the body tag.
I would generally recommend to not use any width or height properties on the body tag.