I have this small piece of CSS code body { background: url(images/bg.jpg) repeat-x scroll center top; } but I want the background to always stay fixed as background image instead of being fixed at the top of the page.
What are best practises to achieve this? If you look at the picture below you can see that the background is fixed to the top of the screen instead of being fixed as background image even when you scroll down.
body {
background: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
Related
Odd one this, but I want to have 2 backgrounds on a web page, the first one I want to stay at the top (so scroll in the normal way) and once you scroll, you get the 2nd background.
the 1st background i want to cover the width of the page (so i've used 'cover')
the 2nd background I want to continually repeat. I've tried messing around with the code various ways, here's my code at the moment (which has the 1st bg static, so the 2nd bg is never seen at the moment! Grumble....)
background-image: url(http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg); url(http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg);
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
}
The reason I have it fixed is because I make it scroll, auto, or otherwise, the image stretches (because the image is wider than a browser so it can scale up/down on other devices... eventually lol)
Thanks!
Scott
Is this the kind of thing you're trying to do?:
CSS
html, body{
width:100%;
height:100%;
margin:0px;
background-image:url('http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg');
background-position: center top, center center;
background-attachment: fixed;
background-color:#464646;
}
#div1{
background-image: url('http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg');
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width:100%;
height:100%;
}
HTML
<div id="div1"></div>
This essentially overlays the top of the page with a div covering the full width and height of the window which then scrolls with the page.
JSfiddle
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
My webpage has content that is contained in a box of fixed size that is always centered, and a repeating background image filling the rest of the viewport. I would like the repeating background to maintain it's relationship to the content box no matter how I resize the browser window. Can this be done with CSS only?
If you use background-position you can fix the background to a particular spot, in this case, horizontally centered as your #main-wrap is.
http://jsfiddle.net/5kmb2/1/
body {
margin: 0px;
padding: 0px;
background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: 50% 0; /* NEW LINE */
}
Yea, set the background-position to center:
background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat:repeat;
background-position:center;
http://jsfiddle.net/5kmb2/2/
I'm trying to edit the background so it stays centered. However everytime I resize the window to say a smaller size to test it out, the image shifts more and more to the left. I tried other codes but they wind up scaling down the background. If I view my page on another computer, the image is off center as well. :(
<style>
html, body {
margin: 0px;
background-color: #000000;
background-image: url('http://i.imgur.com/zwbnaPk.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
I'd like it to look centered like this regardless of the window size. Although it's slightly off in this photo, you get what I mean.
http://i.stack.imgur.com/iN5BR.jpg
First of all...the black center part on your background is not on the center and second, you could accomplish same results with less CSS
html,
body {
background: #000 url('http://i.imgur.com/zwbnaPk.jpg') center no-repeat;
background-attachment: fixed;
margin: 0;
}
I want to set a non scrolling background image(1170x700) to an element() which is 1170px wide. For that I used following css
.container
{
background:url("bg-image1170x700.gif") no-repeat fixed center top #fff;
}
PROBLEM :- Initially the image is being truncated and if I scroll down its displays correctly. Not sure what am I missing ?
You can use background-size:
.container
{
background:url("bg-image1170x700.gif") no-repeat fixed center top #fff;
background-size: contain;
}
You are displaying it fixed. It is most likely being hidden by another element, and when you scroll it scrolls out from behind that element