I have what is probably a simple question but I can't find the answer for it. I have a background image that looks fine and tiles fine and scrolls fine. However, I have a second background image that is layered on top of it that is put inside a wrapper div ("whiteBackground" I believe it's called) and I do not want that one to scroll with the page. As the content and text gets longer and forces the user to scroll I'd like for the second background to stay static. That way while the user scrolls down the page it would just make it seem AS IF the second background was just perfectly still.
I've tried to do a fixed background attachment in my "wrapper" div but it's a no go.
Any ideas?
http://jsfiddle.net/SMc9R/
`#wrapper {
position: relative;
width:960px;
min-height:768px;
margin: 0 auto;
background-image:url('images/white_background.png');
background-attachment: fixed;
font-family:'MuroRegular';
}`
This is the main part I believe the problem is at.
There are no images but I figured that my markup and CSS should be enough. Any help would be appreciated. Thank you so much!
Demo :http://jsfiddle.net/SMc9R/1/ DO YOU want like this.. or specify any correction regarding this correction...
#banner {
position: absolute;
float:left;
width: 960px;
height:60px;
text-align: center;
font-family:'AmaticBold';
font-size: 50px;
background-image:url('images/banner.png');
background-repeat: no-repeat;
z-index: 4;
}
Related
Recently im finally making my webgame responsive and im struggling with it.
I researched that in order to my divs to be a proper size on every device I need to set position: relative on parent element, position: absolute on the divs I want to be responsive, and that part I get.
However, I need my divs to be related to the background image, because the parts of the backgrounds are clickable via divs. Can anyone guide me how to do this? Recently Ive got it looking like that:
I believe I could achieve what I want with setting proper properties on the background image which I currently have set as:
#corridor {
/*position: relative;*/
height: 100vh;
width: 85%;
float:right;
background: url("corridor.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
I'm SURE there is a stupid easy answer to this, but I'm just learning to code and I can't figure out what is going on here.
http://bit.ly/1zuki3W
The images adjust to the screen size, but the page doesn't let you scroll. But the background does move.
So, how do I freeze my background image (that may just be a bounce back in Apples OS?)?
And, how do I get the ability to scroll?
remove the position fixed attribute from the body css like
body {
background: url(pictures/Backgroundtest.jpg);
/* position: fixed; remove this attribute */
font: Palatino;
margin-left: 30px;
margin-right: 30px;
overflow: auto;
}
You should only remove the position:fixed from the body
Thanks!
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
The site i'm editing is www.bedriftsdesign.no.
I've got a shadow image element (shadow.png) wrapped arround the body.
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
I'd like to make the shadow stay fixed while the content scrolls through it inside so it looks like it scrolls over a bump. I tried to add position: fixed like this
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
position: fixed;
But this only made the whole page stick and let nothing scroll. I just can't understand how I should progress to make this work.
Any help to fix that problem would be really appreciated?
You could set the body bg img like so and let the rest of the site scroll:
body {
background: url('shadow.png') no-repeat;
background-attachment: fixed;
}
I've done this to this site (if is that you want): www.kapantzakis-snails.gr
On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.