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/
Related
The full image is not displayed properly, the bottom of the image is missing, how can I display the full image on screen? (dimensions: 5904 * 4000 px)
I tried with object fit but its not working:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100vh;
background: url("adult-blur.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
object-fit: cover;
object-position: bottom top;
}
I also shared a video of this problem in facebook: here
You cannot have both:
The image show fully
Have the image cover the entire background
Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.
Your options are:
Have the image always be full-width using width:100%. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport.
Have the image always be full-height using height: 100%. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport.
Use backgorund-repeat to have the image repeated vertically or horizontally to cover any whitespace.
Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.
Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.
Check out this code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#body-container {
width: 100%;
height: 100vh;
background: url("j.jpg") center center no-repeat;
background-size: cover;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body-container">
<!-- Place your document contents here -->
</div>
<body>
</html>
Here we used bootstrap-4. Put all contents of document body inside div container. In styles, background-size is used to make our image 100% in width n height. If it image stretches absurdly, you can also try background-size: cover.
Finally, overflow-y property is used to make our div scrolls vertically
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 use such css for setting responsive background. When I see it on mobile, the background is zoomed in more and more if there is a lot of content appears on page. What is the proper way to avoid zooming of background? thanx
body {
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
A viewport meta tag like this might help (at the top of your html):
<meta name="viewport" content="width=device-width, initial-scale=1">
This will ensure that on a mobile screen, the content will not be displayed as on a large screen, and the width of the body element will only be as wide as the screen.
Its due to cover, cover will make sure the whole container gets covered with the image. You could try to use contain
You can try to define the body height as 100%, this should avoid vertical stretching of the background image:
body {
height: 100%;
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
And for that body height to work , you should also add this to your CSS:
html {
height: 100%;
}
With these setting, the bodys overflow is the default auto, which will cause a scroll bar to appear as soon as the contents exceed the 100% height.
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.
My home.html looks like this:
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<img class="mod" src="image.jpg" alt="">
</body>
</html>
Note:
1. I haven't put within a as I am not aware if it a good practice, but I have noticed it in all wesites.
2. Didn't use width and height properties in tag, because I was not sure how it would help me.
Now the image is very huge and I want to automatically fit it any of the screens of desktop, ipads or mobile in the below way:
horizontally, the image should occupy the full screen
vertically, the image should occupy half the screen
It is okay if the part of the image is cropped while scaling vertically.
I know the allows viewport, but I want to do it in CSS3. This is what I did:
img.mod { margin:0; padding:0; border:0; background-size:100% }
But it didn't work.
I want my webpage to look this way:
Image
Text
Image
Text
.
.
.
The images should fit completely the width without scrolling needed.
Background size is CSS3 attribute but it works only with background images. In your case you should do something as shown below:
body, html{ height:100%;}
img.mod { margin:0; padding:0; border:0; width:100%; height:50%; }
If you want this to implement using background then use below code:
body, html{ height:100%;}
body { margin:0; padding:0; border:0; background:url(**yourimage**.png) top left no-repeat; background-size: 100% 50%; }
Cheers,
Ashok
Change
background-size:100%
to
width:100%
This will fit the image horizontally across the screen. Note that the height is going to automatically adjust itself to stay in proportion to the width. Trying to set the height to 50% is going to result in a distorted image, because chances are 100% body X 50% body are not the natural dimensions of the image.
To crop the image at 50%, there are a few options. You can google around to find others, but a method I have used before is wrapping the image in a container with a style like this:
.container {
height:50%;
overflow:hidden;
}
See this fiddle