I am using the same template as this one, but their background stays fixed while scrolling the site, while mine scrolls.
If you go to both sites you will see what I mean. I googled and tried inspecting element and came up with this which fixes my problem, but my background isn't responsive anymore.
<style>
.jqbga-web--image {background-attachment: fixed;}
</style>
My site
Any help or suggestions will be much appreciated,.
You should give background to body tag.
Change the below to the div you have applied the Image to..
Change background-image:URL(..) to
background:url("https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s851c6cbbc20d5b79/backgroundarea/i3fbea4494e0dd3c4/version/1464635663/image.jpg")center center fixed;
and also add
background-size:Cover;
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I am developing a small site:
http://www.designbyantony.com/David%20Quigley%20www/index.html
(It's within a folder of my own site on my server)
I would like the footer div to follow on from the content at the end of each page ie: NOT to stick to the bottom of the viewport. I have managed this on all pages except it isnt working on the homepage - as per link above. I have spent a good day trying to fiddle with over:hidden etc but I'm not having any luck. I've a feeling it's something to do with the fact that the homepage uses a fullscreen image.
Bring the contents outside #header you are missing </div> after header. Remove position: fixed; from #homepage_content add z-index:-1 to #bg
i have replicated your html in jsfiddle. and set the background in css background: url.
footer seems to be in the bottom.
http://jsfiddle.net/btevfik/hDkQC/
Ok, i think i know what you are looking for.
Move the #homepage_content outside of the #header by removing the </div> after <!-- InstanceEndEditable -->. Instead add a </div> just before the first clear div.
Change the css code of #homepage_content to position: relative; or just remove the position: fixed.
I think you are looking for a transparent background color of the #homepage_content, right? To do this you must remove the bakcground-color of #homepage_wrapper and instead put white background-color on the #header div.
Hope it fixes it.
This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.
I followed this css-tricks how-to, to implement a sticky footer. I was successful but noticed that the (min)-height:100% has an negative effect on when I try to apply a margin-left of right to my primaryContent div.
At a certain height it causes a block of whitespace to show up. The only work-around I've found so far is to use padding instead of margin.
The height that this happens can be seen in my screenshot below. And I also notice if I remove the "background:inherit" line from #primaryContent div that the background of the container div stops at the same height that the margin white space problem occurs.
Any type of help is appreciated, links to the source code are:
default.css
index.html
reset.css
Screenshot:
very strage how they let that slip here is a fix :D
look for this in the default.css
html, body, #container {
height: 100%;
}
replace it with
html, body {
height: 100%;
}
Im not completely sure what the explanation for why this happens it could just be an css bug but there is always a work around.
bada-bing your done!
Click the "Reference Link" at the bottom of your example URL....it points to the original source: http://www.cssstickyfooter.com/.
If you click the "How to Use the Sticky Footer Code", you'll find that because the way their/his solution is written - padding for height attributes is proper - not margins.
I read through the documentation a week or so ago - thought I saw that caveat. <find>+padding will take you right to the notation.