I want to have a GIF that stays in the centre of the page regardless of where the user scrolls. I want there to be the illusion that the image is 'floating above the page' rather than it being on it.
I believe CSS would be the way to go about doing this? Assuming a have an image called foo.gif, what would the CSS be to do this?
Without more specific guidance on what you want, and why, the best I can offer is:
img {
position: fixed; /* forces the element to stay fixed in relation to the viewport */
top: 50%; /* sets the top of the image 50% of the page height */
left: 50%; /* sets the left side of the image 50% across the page */
margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
margin-top: -93px; /* moves the image half its height 'up' the page */
box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating'
border-radius: 1em;
}
JS Fiddle demo.
It works with iiz's solution if you change position:absolute to position:fixed.
I created a jsfiddle for you to see.
I also included a drop shadow (from here) to make the image "float".
It's all a bit pasted together, but it will work and you can alter it in any way you wish...
Related
I'm trying to build a rather complicated header. This is what it should look like:
As you can see, the header needs to be centered on the page, but the elements need to expand the width of the page. The issue I'm running in to is that I can't get the white part to extend properly. This is what I currently have:
I can't figure out any way to extend the white background over the black bar on the left side. I can kind of get it working using :before, but only at certain zoom levels (at certain points, a gap would appear between the logo and the overlapping :before, causing a bit of the black bar to bleed through), and we need this to work at all zoom levels.
My only other thought would be to use an extremely wide background image for the entire navigation, but I don't think that's an acceptable solution either.
Does anyone have any suggestions?
Demo: http://www.weblinxinc.com/beta/header/
Try that, on your current code (I used your current #headerLeft:after pseudo element) :
#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}
In a word, I just use a pseudo element to cover the left part in white. So I put it a very high width, and I position it relatively to the logo.
Feel free to put it on another element / pseudo element : I guess this one is making a clearfix.
I am trying to create a horizontal position:fixed line at the top of my website. The layout is two vertical columns. One the left is a fixed menu bar, the right is scrolling content. The horizontal fixed line goes across the top of the scrolling content.
I have created a vertical line dividing these columns like so:
HTML:
<div id="vline"></div>
CSS:
#vline {
min-width: 1px; /* thickness of line */
width: 1px; /* thickness of line */
height: 300px; /* length of line (down) */
background-color: #959595; /* Line color */
margin-left: 205px; /* locating on page */
position: fixed; /* fix to window */
}
However, when I add position:fixed to the horizontal line, it just disappears. Obviously leaving it in normal flow or trying to position it by any other means (absolute or relative) causes it to scroll with the rest of the scrolling content. I thought it might be a problem with the line so I have also tried defining a border as shown:
HTML:
<div id="hline"></div>
CSS:
#hline {
border-top: 1px solid #959595;
width: auto; /* width match window size */
margin-left: 205px; /* locating on page */
margin-bottom: 5px; /* offset for text content bellow */
position: fixed;
}
This has the same problem as using a line. It works fine, the line appears where I want it, at the top of the scrolling column, but until I add position:fixed it will of course scroll with the content. As soon as I do add position:fixed, it disappears.
Unless I am doing something obviously wrong or there is another way to position it I haven't tried, the only thing I can think of is that it is a browser rendering bug. I am using the latest version of Google Chrome.
Thanks for your help!
Position the bars using top and left.
For example,
#hline, #vline{top: 0; left: 0;}
That should do it. You might have a few minor width problems. I suggest doing everything with % instead of hard-coding px.
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
I'm working on a site for a client in which there's a background image that will be centered on the page with text, links, etc. overlayed.
I currently have the image resized as follows:
img.bg
{
height:100%;
position:absolute;
}
This fits the image to the height of the browser, but aligns it to the left. I need it to be centered.
Since I need it to be conditionally responsive to browser-height variations, the usual centering tricks aren't working.
Thanks!
Try removing "position:absolute" and adding margin: 0 auto. For example:
img.bg
{
height:100%;
margin: 0 auto;
}
or may be just place it inside a table <table align="center"> <tr><td>"image goes here"</td></tr> it's easier to manage cause you can add more items to the webpage in future without difficulty, add borders, change colours of tables, etc.
I can think of a couple ways to go about it (untested, so you'll probably have to tweak):
img.bg {
position: absolute;
/* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
top: 0;
bottom: 0;
/* Left and/or right for sizing/positioning */
left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}
img.bg {
display: block;
height: 100%;
width: 500px; /* Whatever your desired width is. */
margin: 0 auto; /* This should work as long as width is set. */
}
Depending on your exact design, either of these should work and be responsive to the size of the browser window. The second one is probably the most flexible and easiest to implement, since you don't have to fiddle with positioning.
The answer depends on exactly what you are after.
If you want an image displayed in the background of the website (which I think you are saying) then I am not sure what method you are using, but if you do away with your img.bg{} in your html and css, and just put the following into your CSS you will get what you want...
body{
background-image:url('background.gif'); // substitute background.gif for the correct file path
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:auto 100%;
}
I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).
I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.
(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)
Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)
Sounds like you want something along the lines of the following:
#myContainer {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px; /* Should include space for a sidebar, if you have one. */
right: 0px; /* Same as above */
}
OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).
Have you tried setting the body margin's to 0?