I have a page with a repeated background image that I want to expand behind the entire page content.
So I want the HTML's height to be set to either 600px or 100% of screen—the highest between them
(600px being the minimum height I need for my content, and 100% in case that the screen height is bigger than 600px so I want to expand my HTML to fit it)
I tried
html
{
min-height:600px;
height:100%
}
which doesn't work.
The repeated background-image is in a nested div (#container) since my site's width is limited and centered
#container
{
width:1000px;
height: 100%;
margin:0 auto;
background-image: url("/images/bg_content.png");
}
<body>
<div id="container">
</div>
</body>
Apply to the body, not the HTML
body {
min-height:600px;
height:100%;
}
This fiddle will always have a minmum of 600px but will expand when required.
Related
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
I have a body of text that is currently responsive.
<div class = "col-sm-6 col-xs-6>
<div class = "well">
<p> A lot of text... </p>
</div>
</div>
I want the text to be scrollable (within the well), but I would like the max height of the well to change based on the screen size.
The following makes the well scrollable but I am not sure how
to have the custom heights... one for sm and one for xs.
.scroll_for_sm {
height: 500px !important;
overflow: scroll;
}
.scroll_for_xs {
height: 250px !important;
overflow: scroll;
}
If you want the height of the well to respond according to the screen size (or height in this matter), just specify a height to your body so in your css, add this:
html, body {
height:100%;
min-height: 100% !important;
}
and then, for the well, add this css:
.well{
height:100%;
}
(The percentages can be changed to pixels, em, %, etc and valued accordingly depending on what you want)
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}
I have a supercontainer (fitting screen width, with margins and padding) , which contains a wider container, which in turn contains (sorry for the redundancy) an undetermined (DB-driven) number of left-floated boxes. It is all part of a Backbone/Underscore template.
I want the boxes to have the same width as the supercontainer, in order to make only one visible at a time (there's a horizontal scroller-function in the Backbone View). I know I could use jQuery to get the supercontainer's width and apply it to boxes upon rendering, but I would definitely prefer a pure-CSS solution to avoid issues with screen resizing.
To make things clear:
HTML:
<div id="supercontainer">
<div id="wide-container">
<div class="fun-box"></div>
<div class="fun-box"></div>
<div class="fun-box"></div>
</div>
</div>
CSS:
#supercontainer {
width:100%;
overflow:hidden;
margin:50px;
}
#wide-container {
display:table;
}
.fun-box {
height:100%;
float:left;
width: ???; /* something that makes it as wide as the supercontainer */
}
How can I do that?
If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes
.fun-box {
height:100%;
float:left;
width: 100vw;
}
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-MDN
You can try making .fun-box a third of #wide-container's width, and #wide-container three times #supercontainer:
#wide-container {
width: 300%;
}
.fun-box {
width: 33.33%;
}
Demo
If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
And here is the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="slider">
<div class="gallery">
</div>
</div>
</div>
</div>
Thanks.
You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.
for 100% height, you need html and body tags to be 100% also
add this to your CSS
html, body { height: 100%; width: 100%; }
you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for
Why do you have .main class? Didnt you forgot some elements?
In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?
I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.