I have a page where the content is 1000px wide. About halfway down on this page, I need to have an image displayed that is 600px high and 2000px wide.
This image should always be 600px high, maintain its aspect ratio and whatever can't be fit at the current browser width, should fall off equally on both the right and left (so the image stays centered as the browser window changes).
There will only be the image - nothing on top of it.
I have tried building a div and having the image fall outside of it (beyond the 1000px, but can't make it work. If I break it out of the container it works with:
.wideimage {
background: url(../images/wide.jpg) no-repeat center center;
height:600px;
}
This works but it would be a lot nicer if I could do it within the 1000px container and have the image fall outside to the edge of the browser window.
To have the image fall outside the container and be centered try making it absolute, left 50% and offset the margin by half the width of the image: https://fiddle.jshell.net/7vpmndfo/1/
.wideimage {
position:absolute;
left:50%;
margin-left:-1000px;
}
And in order to prevent horizontal scroll bars on the browser, you would need to have you're page within a wrapper div (if it's not already) with overflow:hidden;
If you have a variety of images and so may not know in advance the width of the image, you can centre the image with the classic "centre anything" css technique:
.wideimage {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
Related
I have a webpage where footer, header and dividers divs throughout the page are wider than the content area div itself.
I am centering website with:
.wrap {
width: 1500px;
margin: 0 auto;
}
When I resize the window towards the smaller size, the centered view is broken as soon as WIDER footer, header and dividers divs reach left/right side of the screen - http://bit.ly/1nWeHn4.
What I need is for it to only stop when the content area reaches the end of browser screen.
I tried to change the width of wider divs to:
max-width: 1500px;
min-width:960px;
It kinda fixes the problem and would work fine if my wider divs had solid background, however my divider divs are not. As a result, I can see the divider "moving" while resizing the screen - http://bit.ly/1vFxAJR
I am sure there is an easy fix, I just don't know what it is yet :D
In order to make divider move with the content, you have to set background-position to background property.
.divider { background: url("sprite.png") no-repeat scroll center 0 rgba(0, 0, 0, 0);
* changed also background-repeat to no-repeat as you suggested
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.
I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}
Ok, lets see if i can explain this. My page content has a width of 960px. It is centered in another div that has a width of 1426px (#siteWrap).
#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}
What i need to find out is how to get #siteWrap to center on a page regardless of screen resolutions. Most of my visitors are on a 1024x768 screen resolution. When i test this page on that resolution i am forced to scroll left to right to get to the site content.
Any help would be appreciated.
Just set
width: 100%;
and the margin: 0 auto; should be set on your content div, not on this one.
When a container overflows horizontally, the browsers natural reaction is to dock it to the left side of the screen. I think it should be doing this. To get around it, you can use Javascript to center your container element by calculating the necessary offsets based on screen/viewport resolution.
Try the following:
#sitewrap {
position:absolute;
top:0px;
left:50%;
width:1426px;
margin-left:-713px;
background: url(../images/bg.jpg) no-repeat ;
}
This will be centered but will overflow the browser window.