I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems like this method always fits the image to any screen resolution. Unfortunately, the length of the image is rather large and therefore the bottom of the image gets cut off. I have tried various ways to get this working including changing the background-size properties, using overflow-y:scroll and other edits that are not worth mentioning. Here is the code I am working on thus far:
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
</head>
<body>
<div class='image'></div>
</body>
</html>
CSS
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
}
.image {
position:absolute;
width:100%;
height:100%;
background:black;
background-image:url(../pictures/testjpg);
background-size:cover;
overflow-y: scroll;
}
UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen.
body,html {
margin: 0;
}
.image {
background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");
background-position:center;
background-size: 100% 100%;
height:300vh;
}
<body>
<div class="image">
</div>
</body>
A scroll bar moves the viewport so that you can see what's not on the screen. At the above code, if you make your image to expand&contract by giving it relative height (%100 height&width of the screen), there will never be a 'scroll-able' vertical scroll bar because there's nothing to scroll to. It never 'overflows'.
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport.
Related
I've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<img src="LARGE_IMAGE.jpg">
</body>
</html>
You should make width on viewport. Device width wouldn't change after that anyway.
I've been reading quite a bit of answers on this, but simply cannot get it to work. I thought I'd provide a full example, and hopefully I'll get an answer that works for me.
I have this image, bckg.png, size 1200x1920, created with Imagemagick convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png (click for full size):
I want this displayed in the center of the browser window, such that it is scaled according to the smaller dimension of the browser window, so the aspect ratio is preserved.
For instance, if the available browser window page area is 887x487, the smaller dimension is the height -- so I'd like the image height scaled to 487px, and preserving aspect ratio, its width would then be 487*(1200/1920) ≈ 305 px
So, I'm trying the following code, temp.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,body { height:100%; }
/* convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png */
#background {
background: url(bckg.png) no-repeat center center fixed;
background-size: cover;
height:100%;
}
</style>
</head>
<body>
<div id="background">
</div>
</body>
</html>
In Firefox 42, this renders as:
However, what I would have wanted instead, should approximately look like this (I montaged this in an image editor):
... and basically, regardless of how I resize the browser window, the entire image should be shown inside it, centered.
How can I do this with HTML/CSS? (pre-css3 answers are appreciated as well)
Just switch the background-size to contain instead of cover JS Fiddle
#background {
background-size: contain;
** Note that if you want to get rid of the few white pixel margin around on your page top, right, bottom and left sides add this to your body css:
padding:0;
margin:0;
I'd rater prefer this one:
html, body {
height:100%;
padding:0;
margin:0;
}
#background {
background: url('http://i.stack.imgur.com/8H1yb.png') no-repeat center center;
background-size: auto 100%;
height:100%;
}
in order to obtain a larger compatibility width IE (i didn't test on older version but it should be 7+, maybe 6+)
http://jsfiddle.net/sqdkyaot/4/
I am working on a webpage which contains an header logo. This logo has two logo's in it: one with a transparent background and one with a orange background on the right. The image is like 3.000 pixels wide. I want to resize the image to let both logo's fit in the div horizontally. So that on every device I will see the logo's and a part of the orange background (what makes the image that long.
HTML
<div class="logo-header"><img src="logo.png"></div>
CSS
.logo-header {
overflow: hidden;
}
It indeed overflows nicely as I would want it, but when I use an iPhone 4 or some other small screen I am failing to get it have a minimal width.
Is this possible in CSS or is this something I should do with Javascript?
.logo-header {
background-image: url("http://bighugelabs.com/img/nbcam/ribbon_3000_bg_sh.png");
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
width: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="logo-header"> </div>
</body>
</html>
if you check this image it's 3000px wide.
First of all, i recommend you optimise your image (try tinypng.com) and resize it using paint or some such (rezize before you optimize).
then use background cover and set it as a background image
Maybe you can try to split your image in two images.
With CSS, you then insert the second image (with orange background) as background-image of .logo-header, aligned to the right.
i got a little newbie question:
I need to put an image to be a background image of a site. and it needs to show the whole image. The user need to have the option to scroll down.
This is what i wrote and it does show the scroll bars but it doesn't scroll.
The image is very big.
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
background-image: url("OPL2013.gif"); /* Change Image URL */
background-repeat: no-repeat; /* Keep it */
background-position: 50% 0; /* position to center */
background-attachment: fixed; /* For Scrolling bars */
height: 100%;
min-height:100%;
}
</style>
</head>
<body dir="rtl" align="center">
</body>
</html>
**The image is 970X1200 Pixels
By setting background image, you are simply applying an image to the visible area as determined by the element it is applied to.
As such, you will likely want to add the image as an img element into your body, or explicitly set the dimensions of the body itself to those of the image.
The reason scrollbars arent being shown is that they are dictated by the overflow of an element, which is determined by its content. The background property does not represent content propagated to the element, as such- it cannot influence overflow and thereby cause scrollbars to appear. This is why you will need to either change the dimensions of the element to create overflow on its parent, or apply the image as the src of an img to do the same.
I'm creating a html page with an image as background for the body. I want the image to fit the screen width, so, I set the viewport to screen width. The image is well rendered over the different devices, but when the screen height is very low with respect to the screen width I can't scroll the page vertically, so my image is cut.
Here's my html and css:
body{
background:url(images/back.png);
background-size:cover;
background-repeat:no-repeat;
background-color:#081A28;
}
<head>
<meta name="viewport" content="width=device-width,minimum-scale=0.1,maximum- scale=10.0,user-scalable=yes"/>
<script src="lib/jquery-1.6.4.js"></script>
</head>
<body>
</body>
How can I make the body scrollable? I tried with overflow:scroll, but this way a scrollbar appears on the right, but does not give the ability to scroll the page.