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
Related
Well I am new with this, so I have this url https://bestfamily.gr and I tried to create a responsive header with image. I did the following with css
background: #000000 url(my_image_url) 100% 25% no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
The image displays a family, so when I zoom in or zoom out the image performs responsively.
But while I zoom out the image shrinks towards top and the faces in the image are not visible
Can I make the image to be shown normal and not actually hidden
Add background-size:cover and then remove the padding:153px on div id="page". It will resize responsively.
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'm trying to show the full background image as a landing page, then the content appears when the user scrolls down, however the bottom of the background image is usually cut off (depending on browser resolution).
I'm trying:
background-attachment: fixed;
background-size: cover;
Here is a codepen that demonstrates the issues:
https://codepen.io/suez/full/wulBv/
You can see that the bottom of the first image with Iron Man is cut off. Here is the full image (https://i.imgur.com/PbV1Grl.jpg).
Is there a way to show the full height of an image? Even if you need to scroll down more to see it?
use css:
background-size: 100% 100%;
You can add background-position: bottom
https://codepen.io/anon/pen/XMMVYo
It won't show the full height in most cases, but it will show the bottom of the image.
Or you use background-size: contain and (in this particular situation) combine it with a white background color
EDIT: White won't work, I didn't look close enough. Here's approximately what I mean, but it's not really satisfying, since there isn't just one color at the border of the image:
https://codepen.io/anon/pen/zZZpMX
You can use background-size with 100% height and width.
Remove
background-size:cover;
Replace with:
background-size:100% 100%;
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;
body{padding:0; margin:0; background: #000000 url(images/backgrounds/main_bg.jpg) no-repeat center top; width: 100%; font-family: Arial;}
Here I have a simple background that centers when the browser resizes, which is great, however I have a 1024px centered column and want the background to stop centering like the center column does. Otherwise it looks weird.
Thanks
You need to make the background image the same size as the column, and then put the background picture in the column not in the body.