I have a large background cover.
<div id="cover">
...
</div>
And the CSS
#cover {
background:url('cover.jpg') no-repeat fixed center center / cover;
height: 350px;
width: 100%;
}
The expected output : The background image, resized to 350px x 100% (in my case 350x900), should have a scroll effect based on the <div id="cover"></div>.
The actual output : The background image, resized to viewport (in my case 1440x900), has a scroll effect based on <html></html>.
What I want is for background-attachement:fixed to be relative to the div not the viewport.
Background images are by default "fixed" to the element they are attached to. When you set a background CSS property to fixed, it does the same it would do for a DOM element, it makes it fixed regarding the whole document (viewport).
Changing the fixed property to scroll should do the trick here:
background:url('cover.jpg') no-repeat scroll center center / cover;
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 have been trying to fit my background image to responsive view, but all I have been getting is cropped image.
.container_bg {
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
height: 1635px; /*My Image height is 1635 px
}
<div class="container_bg">
A
</div>
Now when I switch to "iphone x" view from chrome inspection
Only top left part is shown, How can I adjust the size of background
as per responsive mode.
I also used background-size:100% auto
It shrinks the image and all my contents goes outside the DIV.
Is there a way, or should I make different image size for responsive?
To make your background stretch over, use background-size to stretch it which will mean you don't need the height and background-position will allow you to center the image in the middle of the screen.
.container_bg {
height: 1635px;
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
background-size: cover !important;
background-position: top center !important;
}
<div class="container_bg">
A
</div>
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 have a simple page which should always have its background image centered horizontally.
Here is my css:
body {
background-image: url(htts://url_to_my_image.png);
background-position: top center;
background-repeat: no-repeat;
}
and my jsfiddle:
The problem occurs when the browser window isn't tall enough to fit the entire image. I seem to be unable to scroll to the bottom of the page (thus cannot view the bottom of the image). What am I doing wrong?
background-size: 100% 100%; may help you
UPDATED FIDDLE
ADDED CSS ::
html,body{
background-size:100% 100%;
min-height:100%;
}
and if you want a scroll bar to view the full image then dont use that image using background but display it using <img src="" />
OR..
if you still want to have a scroll bar to show the full image while it is set as backround then set the min-height of your container (in your case html,body) equals to the actual height of the image
MAKING BACKGROUND IMAGE SCROLL
I'm building a thumbnail gallery. For each thumbnail, I am creating a clipper div and placing image inside that div. Thumbnail sizes are different for different images where as clipper div is 150x150px
<div class='clipper-div'>
<img class='image1' src='img/img2.jpg'/>
</div>
I want to place that image so that it occupies that div completely and rest of the image is clipped such that it is exactly centered.
In order to do this, I am seeing what is the smallest dimension of the image ( height/width ), making it 100%. And then for other dimension, which is now greater than div's 150px. I'm calculating difference, dividing it by 2 and setting top/left attribute to negative of that value so the image looks centered, and then adding overflow:hidden to clipper div so the excess portion is invisible.
I want to know if there is a better way of doing this, instead of me calculating these values can I just set CSS properties so that all images will be centered in that div (vertically/horizontally) and remaining part is clipped.
If my description is confusing, here is an example:
Let's say thumbnail size is 300x100px. So height is the smallest attribute, so I'm setting it to 100%. So height becomes 150 and width becomes 400px, so now I calculate the offset. In this case (400-150)/2 = 125px. Now I set image left to -125px
.image1{
position:absolute;
left:-125px;
height:100%;
}
Try this:
.Image1 {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}