I've set the background of my footer to background-repeat: repeat-x but for some reason when I zoom in, the background stops repeating... The blue bar you see should be repeating the whole width of the window according to the CSS rules (and he does, execpt when I start zooming in)
Is this normal? If yes, how can I prevent or pass by this. If not, what could be the cause?
EDIT:
I just figured out if you set the width of the body to e.g. 1,000px or 5,000px the footer starts expanding, but when I zoom out to the normal size, the site is extremely large... And width: 100% didn't work out either.
Give the footer a width of 100% and then give it a min-width equal to the width of your content. So if your content has a fixed width of 960px for example, your css would be:
#content { width: 960px; }
#footer { width: 100%; min-width: 960px; }
Related
I have a website that I am trying to make behave decently when a browser window is resized. For instance, I want the banner image to be resized when someone shrinks the browser window. The site is http://www.pfp-consortium.org
The banner on top is specified in CSS as
#rt-showcase .rt-container {
border-bottom: 0px none;
height: 200px;
width: 1200px;
background: transparent url("/images/headerimgs/topimage.jpg") no-repeat scroll center center;
}
So I know the fixed width and height has to go. In reading numerous threads on this site, I tried various recommended approaches. I tried setting width (and max-width) to 100% and height to auto, which seems to be the accepted approach. Strangely, whenever I make height anything other than a px value, the image disappears!
Maybe some other aspect of the site is preventing the resizing happening as I would expect?
Any insights appreciated.
The problem is that .rt-container is empty so when the height is auto (or anything except px) the div defaults to 0 height (empty). If you take that image out of the background image and make it an <img> tag then you can apply width: 100%; height: auto; display: block; and it will scale with the window correctly.
I have a page and I want to eliminate the scenario where it scrolls left to right. No matter what resolution I view it on, it leaves about 70px of white-space on the right. On the page http://bitfilmfund.com/ I have set
for the city image background part, I have already set the body to be:
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
I also did a media query where I defined the CSS to resize the image based on a max-width of the viewport, such as:
#media (max-width: 1600px) {
#baner {width: 100%;
}
}
to get the city scape image to stretch the screen, and tried smaller sizes too for smaller res's, but it just does not work.
There is consistently a patch of white space at the right. Even if I set the CSS width's to be as high (high number for width, that is) as they can be until the screen is filled, I still have the left-right scroll. I want the images and background to resize to fill the screen and create no need for left-right scroll. Why don't this CSS works?
Quick Fix:
The first <div> with class='row' is causing the page to scroll horizontally; more specifically:
margin-left: -15px;
margin-right: -15px;
will cause this unwanted whitespace and horizontal scrollbar.
Additionally, the margin on the <body> should be set as:
margin: 0px;
in order to avoid some browsers (Chrome, for example) applying the 'default' margin that they like to apply.
Longer (surplus) fix:
Whilst the container elements on the page are re-sizing dynamically, a fair amount of the content is not. (Including the banner image as mentioned and the iframe containing the video.) The user's viewport size should be taken into consideration, in that when viewed from a smaller ~<1675px width the top navigation bar refuses to resize down and instead creates the horizontal scrolling issue. These problems can be fixed by using percentages rather than px, as I am sure you are well aware, (considering the usage of percentages on container elements).
Obviously, the screen size cannot resize down indefinitely - a limit has to be drawn somewhere. According to W3Schools, most browsers are now above the 1024x768px as a minimum, even Google doesn't resize down to this level however. It's up to you to choose where the minimum size lies for your website; but the more all-encompassing, the better.
Banner image:
This should be a fairly straightforward part, the following CSS properties should be of use to you, when added with the CSS that defines the image to be displayed:
background-size: 100%;
background: //your-image-location// no-repeat;
This will however, become stretched or compressed depending on the browser size, but is a good starting point for resolving the issue.
Maybe the title is not easy to understand, sorry.
My problem in detail: i created a wordpress theme with an header. This header is surrounded by the "header-div". The header div has a width: 100% and a coloured background. But if the content in another div below overflows the viewport and you scroll horizontal, the background is white.
I know that the "width:100%" just is 100% of the parent element, but there is just the body. And the body has "width:100% and height:100%".
Where is the mistake?
Here is the site:
http://ericgerhardy.de/selltron/
Just try to reduce the browser width to 500px and scroll to the right. This should show my problem.
PS. I´m sorry if the question is already answered, but i searched for a while, with no results.
The white background appears because you have set a min-width: 1000px at some of the elements below the header.
If your only concern is to prevent the white background from appearing at the right side of the header on smaller screens and you don't care about having a responsive page (which is the case, if I understood your question), then you need to add min-width: 1000px; to your #header as well like this:
#header {
background-color: #D3D0CE;
height: 245px;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99999;
min-width: 1000px; /* This is the extra line */
}
The problem is that absolute positioned elements doesn't resize their parents but overflows them.
In this case your body is overflowed and a scrollbar appears but his size is still 100% of the viewport, because he is not expanded.
The abuse of absolute positiong often leads to such problems. Try tu use static positioning as much as possible. In this case it's really easy to use static positioning.
I want to repeat a background-image for a div vertically till the bottom of the page.
#repeat {
background: url(repeat-image.png) repeat-y;
height: 100%; /* this does not work, but height: 1024px; does */
}
This does not work. I need to do so according to the page design that I have got. Can this be done?
With regards
Vikram
try to set height:100% for your <body> and <html>, too. if there is nothing except this div on your page, 100% height will be 0px without these settings.
For web pages, height is a funny thing. Since web pages expand vertically, the total height of your page can actually be 0. You may consider using min-height for each element that requires at least a certain height. You can use height: 100% to fill the full height of the parent.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size