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.
Related
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%">
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 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.
I'm created a sitemap for a website I'm developing and I'm having some trouble stretching a background image across the entire screen as shown in this screen shot. Screenshot
As you can see, there is a border along the right side and the bottom that I'm trying to get rid of. The markup I'm using is
#sitemap {
background-image:url(images/gradient-sitemap.png);
position: relative;
left: -10px;
top: -1px;
width: 100%;;
height: 225px;
}
Try to remove all from your body tag and HTML
html, body{margin:0px; padding:0px border:0px}
set the width to 101% and the height to something more than the current 225px
http://69.143.137.155/csa-consulting/index.php
I am trying to extend the grey menu bar and the blue background to fill the window (whatever the size) yet keep the content centered at a fixed size. Been working on getting this for a while and cannot seem to figure it out.
Thanks!
Use a background image on the <body>.
.body {
background:#F2F4EE url(menu-bar.jpg) TOP CENTER REPEAT-X;
}
Try adding the width style to your nav class. Like so
.nav
{
width: 100%;
}
Remove the following declarations from #container:
margin-left: auto;
margin-right: auto;
width: 1024px;
Add the following declaration to body:
margin: 0;