I'm trying to make a simple webpage where when you open it, the photo called "wallpaper.jpg" will adjust based on your window size so there's no scroll bars. The photo is 1920 x 1080 if it matters.
Currently I have:
<html>
<body bgcolor = "#000000">
<style>
img {
height:100%;
width:100%;
}
</style>
<img src = "wallpaper.jpg">
</body>
</html>
but it's still leaving a vertical scrollbar
First things first:
don't use bgcolor its deprecated,
you should reset margin on body because it has margin:8px by default (the value may change depending on the browser), to remove white space around.
Then using img you always going to have a vertical scrollbar if the img height is higher than viewport height(if img hasn't a parent with a width)
So a solution for that is using the image as a background, using cover to make it full page responsive
body {
margin: 0;
background: url("//placehold.it/1920x1080") fixed no-repeat center center / cover
}
`
Answer provided by #dippas will work if you want to put the image in the background, but if you are using the img tag in the html document, heres a way!
html {
height:100%;
}
body {
position: relative;
height:100%;
width:100%;
padding 0;
margin: 0;
}
img {
position: absolute;
height: 100%;
width:100%;
}
Here's my JSBin implementation. Hope it helps!
This method also works. Replace the "image.png" with a real link to your image.
html { height: 100%; }
body {
height: 100%;
margin: 0;
overflow:hidden;
}
<img src="image.png" height="100%" width="100%">
Related
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I have the following example: http://jsfiddle.net/4EpRv/
and another here: http://jsfiddle.net/4EpRv/1/
Both show two images (one taller than wide, and the other wider than tall). The code SHOULD be making the images align in the middle (horizontal and vertically) and fill the space of the screen until the image hits its maximum width or height and should have 72px of padding around them (at a minimum, depending on the image size and aspect ratio)
The first example works fine on all screen sizes, but the second example breaks on portrait screens as the image appears off-canvas at the bottom.
See screenshots for the second example: http://dev.driz.co.uk/gallery/ipad1.png (not working on portrait) and http://dev.driz.co.uk/gallery/ipad2.png (working on landscape).
And see screenshots for the first example (that work): http://dev.driz.co.uk/gallery/ipad2.png and http://dev.driz.co.uk/gallery/ipad3.png
The HTML is as follows:
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
and the CSS:
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Any ideas why the second example breaks on portrait screens if the image is wider than taller?
And how I could fix this?
Update: Media Queries might be an option if I can apply a different rule if the screen is portrait and need to do something slightly different.
Update 2: The :before declaration is important, as it's what centers the image vertically, see here for an example without it: http://jsfiddle.net/4EpRv/2/ so removing that isn't an option, unless I can find an alternative. And here is proof that removing it causes the image to NOT be centered in the middle vertically: http://dev.driz.co.uk/gallery/NotWorking.png
Update 3: Using JavaScript has been the best solution so far, as by NOT using padding and instead positioning the element centrally I can handle all the issues: http://dev.driz.co.uk/gallery/2/landscape.php but can this be done in pure CSS?
I retyped the post with a solution to your problem. Hope it helps.
CSS
html{
width:100%;
height:100%;
margin:0;
}
body{
width:100%;
height:100%;
margin:0;
}
.gallery{
position:relative;
}
.gallery-background {
width:100%;
height:100%;
display:table-cell;
background-color:#333;
text-align:center;
vertical-align:middle;
padding:0;
margin:0;
border:0;
}
.gallery-background img {
display:block;
max-width:100%;
margin:0 auto;
max-height:100%;
}
JavaScript
$(function(){
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
window.onresize = function(event) {
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
}
})
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
I have added the solution on here. I believe it is almost impossible to do without some fixed height. I have added JavaScript in to assist you.
Edit: I have fixed the question you asked with the use of JavaScript also adjusts on window resize. http://jsfiddle.net/4EpRv/9/
Edit: Fixed Scrollbar http://jsfiddle.net/4EpRv/11/
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. I think table-cell method or translate() method will suite you best.
I'm trying to create a full screen html template like this image(center of page):
in the pointing of man and some other points, i want create a click ables button, but because image full screen and fixed position, button in another screen size get other position.
my code for full screen image:
html, body ,form
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
min-height:100%
}
.fullscreen
{
z-index: -999;
height: 100%;
position: fixed;
width:auto;
padding: 0;
margin: 0;
}
<img src="source/fullscreen.jpg" class="fullscreen" />
how to fix this problem for all screen size just with css? and center fullscreen image?
You can set "margin" property - CSS, of all those buttons with respect to their respective positions.
Your problem of centering an image both horizontally and vertically is well documented at CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
One of the examples (which is close to what you want and doesn't have the drawback of having to know the image dimensions in trying to use the method):
html {
width:100%;
height:100%;
background:url(http://i.stack.imgur.com/5qSmX.jpg) center center no-repeat;
}
Which looks like this in action:
http://jsfiddle.net/ukVNS/
Consult the link cited for the other methods.
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */