Dear visitors stackoverflow!
I can not solve a simple problem:
Body given the background of the picture "1.jpg" (it is automatically pressed against the header),
I still need to put a picture - "2.jpg" to be pressed on the contrary to the footer. That is, I need some "rubber layout" in height, so that images were sliding when the height of the page is large, and would come when the content is not enough. I would be happy to link a working example (not even a demo, but just a site that I myself look the source code), but at least I would be grateful for the usual suggestions and ideas! Thank you in advance.
Sorry for bad English, I tried to write competently.
update:
Thank you very much for your answers. Do not pay attention to what I
chose only one, you helped me and I thank you all!
Put you image 1.jpg in body background using css and 2.jpg in background of footer.
I dont know what are the sizes of your images so You can see the below link to get some help -
http://css-tricks.com/snippets/css/fixed-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
You can achieve this with CSS3:
body {
background: url("1.jpg") top left,
url("2.jpg") bottom right;
}
If you require support for older browsers (See here for current support), you will have to use an tag for the second image.
For full browser support, I'd have one image set on the <body>, and then another image set on a site container, e.g. <div id="site">
HTML
<html>
<head>
<title>Title!</title>
</head>
<body>
<div id="site">
[Your website here]
</div>
</body>
CSS
body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}
Related
This is my first question here, so bare in mind that we may have some issues with code.
But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom.
URL TO SITE IN 1 Comment.
I'm pasting the HTML & CSS with Pastebin for you people that don't wanna see the page.
Please bare in mind that the CSS is rough and not clean, same with the HTML as the page is under development.
I searched here a couple of times without result, and couldn't get it going without messing up the whole page.
I can only test this live on Safari in Yosemite, and on Chrome Win 7.
HTML and
CSS
I think myself that it have with the bottom images to do with.
FYI: I don't own any of the logos and this is a non profit entuisasm project for F1 Simracing.
Thank you and kind regards.
U have really messed your code a lot..!
Do these changes, it will work perfectly.
remove html,body {height:100%}
/**** add CSS ***/
html {min-height: 100%;position: relative;}
body {margin-bottom: 288px;}/* height of footer */
footer {position:absolute;width:100%;left:0;right:0;bottom:0;}
delete that container tag from bottom of html page.
Alright, I got the footer to the absoulte bottom of the browser (Safari atm)
But the content gets hidden behind the footer, and thats no good.
Attaching image and code
Screenshot CSS
Im really sorry for the messy CSS, but i really appreciate all help!
I have a problem with my new website i'm designing in HTML5.
It's a single page site with 5 different sections.
The home page is index.html#home and all sections appear properly, except of index.html, which is zoomed-out.
All sections have the same CSS:
width:100%;
background-color:#7fffd4;
padding:5px 0px;
margin:0px;
Here are the screenshots:
Normal:http://i.imgur.com/VO8U28o.jpg
Zoomed-out http://i.imgur.com/NZ11fHy.png
If you have any idea how to fix this i really appreciate it.
Chrome remembers the state of the zoom for each URL you have set, make sure you haven't accidentally zoomed out on the index page.
Press CTRL + 0 on the index page to check (or go to view > actual size).
The Text on one section is pretty long. I think this is causing the zoom-effect. Try to shorten the text or auto-wrap it with CSS.
You could put the long text in a <div id="someid"> and change your CSS
like this:
#someid {
width: 100%;
padding: auto 30%;
}
auto is top and bottom and 30% is for left and right.
You should adjust the 30% like you want.
It will format your divs to always use 100% of the given browser window.
Thank you both for your quick reply.
The index.html was in fact zoomed out in chrome, although i put it to 100% on some other subpage of my website.
I'm going to wrap the text anyway, that was a good idea. Thanks again.
Cheers, stax
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 creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
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.