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.
Related
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.
I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
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; }
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.
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