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.
Related
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.
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'd like to have an image fit the screen without being cropped in both portrait and landscape mode for responsive design. I've tried:
<!doctype html>
<html>
<head>
<style>
img {
max-height:100%;
max-width:100%;
}
</style>
<meta name="viewport" content="initial-scale=1.0" />
</head>
<body>
<center>
<img src = "http://www.terragalleria.com/tmp/square.jpg" />
</center>
</body>
</html>
The image is a square. If the page is loaded while the iPhone is in portrait orientation, it stretches to fill the width of the screen, with space at the bottom, which is what I wanted.
However, if I rotate the iPhone to landscape orientation, the image now stretches to fill the width of the screen and is cropped in the vertical direction. What I wanted instead is to have the image stretch to fill the height of the screen with white space on the sides.
In order to see that, I need to reload the page. Is there any way to achieve the correct resize upon iPhone rotation without need for the user to reload the page ?
There are likely a couple of problems here:
You have to set html and body to have height: 100% to have any child elements know what "100%" means.
Your <center> tag is not only deprecated in HTML5 but will cause problems if you don't give it height: 100% as well.
Here's my solution: http://jsfiddle.net/k74w8bcf/
This should auto-size both horizontally and vertically with resizes to the browser window (including rotation) - tested as working on iOS 8.1.3.
I'm playing around with media queries and started developing for a mobile screen. I have the first page relatively how I would like it, but I am getting a horizontal scroll bar at the bottom when I resize my screen to <480px. I haven't tested this on a mobile device yet but I'm assuming the same error will appear.
The site is: http://brad.sebdengroup.com/newOdynSite/index.php
To recreate error open the site, resize window to <480px and vertically scroll to the bottom
Here's the problem:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.
To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:
<span><strong>What have we done?</strong></span>
You can try to use overflow-x: hidden; on the <body> to simply hide the scroll bar. However, you'll not be able to easily see the content outside the view port.
For mobile devices you can use media queries to specify style sheets:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Or you can use <meta> elements:
<meta name="viewport" content="width=device-width, user-scalable=no">