I'm designing a simple website in HTML and CSS but got stuck. I'd like my website to have an image at the top. Any content that comes after that image should appear underneath the image, not on top of it (like it does with a background image). The image should be 0.6 (or some other fraction) the height of the viewport and centered. Any overflowing part should be cropped. However, in case the image is too narrow, it should be resized to fill the whole width of the viewport. It should never change its apect ratio. I'd also like to keep my site script-free and would like to have no absolute values (like px) in my source files.
Here are some doodles I made to explain my idea:
Image height is set to 0.6vh. It is centered. The overflowing areas are cropped. Text starts at the bottom.
Image height would be set to 0.6vh but it wouldn't cover the whole viewport's width. Instead, set the image width to match the viewport width (equal to the width of the page), ignoring the 0.6vh rule. Text still starts at the bottom.
I've been searching the internet for two days already but I couldn't really find quite what I need.
Additionaly, I am trying to solve this problem: currently, I am using vh to set the height of the image, but it gets weird when viewing on a mobile browser, because the value of vh changes when the address bar collapses.
[EDIT]
Rule:
The minimum width of the image should be the width of the viewport.
Then, if it's possible, it's height should match 0.6vh.
[EDIT 2]
I noticed that the answers work great by centering an image and keeping it's aspect ratio. But the image shouldn't be cropped vertically.
Another doodle:
I hope this doodle makes it easier to see what I am trying to achieve. Red line indicates the "0.6vh rule" while blue line represents the "mininimal width equals viewport width" rule. Green rectangle shows where the image should be.
[EDIT 4]
I added an image and some comments to the previous image:
Rather than using an image tag, try setting its properties in CSS. It's easier to maintain aspect ratio and centering this way. You may also want to specify a minimum and maximum height property to ensure things look nice.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box;
display: block;
width: 100%;
height: 60vh; /* 60vh = 60% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background-image: url('http://www.naturheilpraxis-kaelin.ch/bilder/fruehling-01.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /* Cover all available space. */
/* If you want the whole image visible try 'contain'*/
}
.main{
padding: 0 1em; /* L/R padding to look nice */
}
<body>
<div class="bg"></div>
<article class="main">
<h1>Your rad site</h1>
<p>Notice how the image is centered and it keeps its aspect ratio.</p>
</article>
</body>
[EDIT]
Okay! So here's the best I can do.
This doesn't crop anything vertically and there's no JS or hard values
BUT you do have to use an aspect ratio media query that you need to figure out based on your image.
This is the formula for the aspect ratio media query
Where H = image height, W = image width and D = percent of the viewport used (expressed as a decimal).
H / (W / (D))
For example, the image I used is 1000px x 300px. We're using 60% of the viewport so D = .6.
So 1000 / (300 / (.6)) >> 1000 / 500 >> 2/1 ratio.
body,html,.container{
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
height: 60vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
/* Hack*/
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
min-height: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio:
2/1) {
/* Aspect ratio determined like so -- H / (W * (10/6)) */
.container img{
position: relative; /*Undoing the hack basically*/
right: auto;
top: auto;
left: auto;
bottom: auto;
width: 100%; /*rather than the width get cropped, it's full. height is auto*/
}
.container {height: auto; /* the image height determines the height */}
}
<div class="container">
<img src="http://placehold.it/1000x300" alt="" />
</div>
Make it full page and resize the browser to see how the image adapts.
I really hope that helps!
How about an approach like this:
body,html {margin: 0;padding: 0}
* {box-sizing: border-box}
/*For the demo I've made the height below 30vh, you can change that to 6vh*/
/*Use background-size contain, if your image's height is larger that width*/
.Image-Banner {width: 100%;height: 30vh;background: url('https://i.stack.imgur.com/sj9LO.png') no-repeat 50%;background-size: cover}
.Main-Content {padding: 1em}
<body>
<header class='Image-Banner'></header>
<main class='Main-Content'>
<div>Foo Bar</div>
<hr>
<aside>Lorem Ipsum...</aside>
</main>
</body>
Note: Click Run Code Snippet to see the result.
This should do exactly what you are asking for, I believe.
Created an example based on your information:
[Example][1]
[1]: https://jsfiddle.net/2Lke94qn/1/
Let say that we have two divs:
<div class="top">Top</div>
<div class="bottom">Bottom</div>
Try this style:
html, body{
height: 100%;
}
.top{
width: 100%;
height: 60%;
background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg");
background-position: center;
}
.bottom{
background-color: grey;
height: 40%;
}
Related
I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
(Did some search but couldn't find the exact same question/answer)
I am displaying the YouTube's hqdefault thumbnails on my page. However, I noticed they are 480 by 360, which means they have black top and bottom bars for all 16:9 ratio videos (which are the majority)
Example is: http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg
My question is:
I want the image to auto scale to fit its container's width, which will be a percentage of the total window's width (this means I don't know the exact pixel value in advance). And hide the black bars, and of course don't distort the image's ratio.
Can this be done using CSS only (hopefully with good browser support)? -- I am ok to assume all images should be 16:9 (for those that are of other ratio, I am ok to cut off some part of it, and only display part of it in 16:9).
Thanks
(PS: I have a JS solution, but I want to see if it doable in CSS. The JS solution is to use JS to get the container's width, then set the container's size according to 16:9 ratio. Then stretch the image and position it in the center, hide the extra areas of it -- which basically hides its top and bottom black bars)
I found this solution. Here's an example :
You set the div to width:100%, it will now stretch to the container size, in this case, the body. Then you set the padding-bottom: 56.25%; to get the 16:9 ratio.
Now set overflow: hidden; to hide what's coming out of the div and set top: -16.75%; to hide the upper black strip.
HTML
<div class="stretchy-wrapper">
<div>
<img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
</div>
</div>
CSS
body {
width: 70%;
margin: 8px auto;
}
div.stretchy-wrapper{
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: blue;
overflow: hidden;
}
div.stretchy-wrapper > div {
position: absolute;
top: -16.75%; bottom: 0; left: 0; right: 0;
}
Maybe this - set the image as the background to a 16 x 9 div, then just set image width to 100% and position 50% 50%
div {
background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
background-size:100%;
background-position: 50% 50%;
height:180px;
width:320px;
}
<div></div>
I hope this jsfiddle will help you. Cheers!
working urljsfiddle
It will be fit even your web application/web site is responsive.
Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content must be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content.
I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked.
Edit to Clarify
This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser's viewpane.
A: When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background).
B: When the viewpane is larger than both the background image and content, both remain centered to the viewpane.
C: When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present.
Updated Answer: I still have spent way too much time on this :-), especially when it ended up so simple. It allows for a background to be sized based on the height of the container, which seems to be different than yunzen's solution. Now does use margin: 0 auto;. Still grows with container height.
View the new answer.
You can view the original, more complex answer which does not use auto margin.
HTML:
<div id="Bkg">
<div id="Content">Content goes here. </div>
</div>
CSS:
#Bkg {
width: 100%;
min-width: 300px; /* equals width of content */
background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
padding-bottom: 50px;
}
#Content {
width: 300px;
margin: 0 auto;
}
I guess this is what you want
HTML
<div id="content">
content<br/><br /><br/>
content<br/>
</div>
<div id="background"><div></div></div>
CSS
html, body {
height: 100%;
}
#background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* this is the height of the bg image */
min-height: 600px;
z-index: -1;
}
#background > div {
margin: 0 auto;
background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray;
width: 100%;
height: 100%;
/* this is the height of the content */
min-width: 500px;
/* this is the width of the bg image */
max-width: 800px;
/* this is the height of the bg image */
max-height: 600px;
z-index: -1;
}
#content {
/* these are just some numbers */
width: 500px;
height: 400px;
border: 1px solid gold;
margin: 0 auto;
background: rgba(255,255,255,0.2);
}
Well, if it expands past the browser's window size, it's going to create a scrollbar for the entire window. I wasn't sure exactly what scrollbar you're trying to prevent.
max-width tells it "under no circumstances should this box be bigger than this width." So a box bigger than that will simply expand past the parent's boundaries.
See the jsFiddle.
If I'm understanding the question right, I believe this is what you're wanting.
.main-container
{
height: 1005px;
left: 50%;
margin-left: -560px;
position: relative;
width: 1120px;
}
To hide the scrollbars, you can add
overflow: hidden;
For horizontal only:
overflow-x: hidden;
Try this then:
<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>
For some reason I couldn't get the z-index work, but if you can, you can put your content in the wrapper too, and content is not needed.
Given your original diagram I assumed that the background image was intended to be that - an image, possibly hi-res, rather than a repeated pattern. You may want to play with css3 background-size property which is handy for this specific purpose. It is well supported by modern browsers and regresses reasonably well if you have to support IE8 and under.
body {
background-image:url(/*nice higher res picture*/);
background-size:cover;
background-repeat:no-repeat;
}
http://jsfiddle.net/YyzAX/