There's a white bar appearing below my image when i minimize the window, when its not minimize there's no white space. I've checked my background have no white spaces below it. The actual resolution of the picture is 1920x1080.
I believe its the background shrinking that's causing the problem. I might be wrong, but if i'm correct, how do i prevent the background from shrinking below its resolution?
I've tried background-size: cover/contain.
html, body{height: 100%;}
This is my current code:
`html, body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: 'Abel', sans-serif;
background: url(test2.jpg);
background-size: cover;
background-repeat: no-repeat;
}`
It's maybe because your html page is static. To enable "dynamic" mode you need to add this line in the head:<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
I am writing a website and I have gotten everything in place with the homepage the only problem is when I resize the browser window the background image moves and parts of it disappear as the window is resized. Id like it to stay fixed in the window just have the image shrink as the window is shrunk.
I'm sure what I am doing wrong is pretty simple but I'm pretty new to coding and can't for the life of me figure out what I need to do. Thanks to you all in advance.
<meta name="viewport" content="width=device-width, initial-scale=1">
body{
background: url(Home-background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
when you want cover vertical and horizontal can use this code (pay attention may be deformed this background image)
body {
background: url(Home-background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
You can use bootstrap to do this. In between the head tags of your html file add this:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
It should work. Hope it helps :)
should the image be full width? if yes, make sure you specify the width to be 100%
width: 100%;
should do the trick
you need to use width: 100%; height: 100%; of your body tag.
it should work.
In the HTML file:
<img id="background-image" src="Home-background.jpg">
In the CSS file:
body {
margin:0;
}
img#background-image {
position:absolute;
width:100%;
height:100%;
z-index:-1;
}
As a result, the background image will be fully stretched, vertically and horizontally.
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 am creating a webpage.
I had a picture as background until, on a bigger screen, I realized that it wasn't stretching as supposed.
The image was basically a gradient of colors, but I decided I could equally do it with css:s built-in gradient function.
The thing is though, that the background gets cut off. In the bottom I have a col-sm-12.text-center, and it's below this one that it cuts off.
At the bottom I have a footer so there is a white space between the end of the col-sm-12 and where the footer begins.
I have put on non-repeat on the background gradient since I don't want it to repeat obviously but to continue throughout the page.
I have searched but not found any answer to this problem.
I am suspecting that the col-sm-12 might be the problem but do you guys have any other sultion to this problem?
for streching a background image use size: cover;
.my_bg_img {
background-image: url('./your_image.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
widht: auto;
}
this fit the container ...
if the container is too small remove col-sm-12 or change the related container (eg: body for sample)
I have nothing in my Html.
In my CSS
body{
font-family: "Source Sans Pro Light", sans-serif;
background: linear-gradient(to bottom left, black, white);
background-size: cover;
margin-bottom:10px;
background-repeat: no-repeat;
height: 100%;
width: auto;
I'm trying to edit the background so it stays centered. However everytime I resize the window to say a smaller size to test it out, the image shifts more and more to the left. I tried other codes but they wind up scaling down the background. If I view my page on another computer, the image is off center as well. :(
<style>
html, body {
margin: 0px;
background-color: #000000;
background-image: url('http://i.imgur.com/zwbnaPk.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
I'd like it to look centered like this regardless of the window size. Although it's slightly off in this photo, you get what I mean.
http://i.stack.imgur.com/iN5BR.jpg
First of all...the black center part on your background is not on the center and second, you could accomplish same results with less CSS
html,
body {
background: #000 url('http://i.imgur.com/zwbnaPk.jpg') center no-repeat;
background-attachment: fixed;
margin: 0;
}