i was put .svg file as background image.
in small screen it was ok, but when i show in large screen it was cut from top and bottom
i want to show background image in full height/width as original size in large and all screen
demo image
-here is my code
.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
</body>
</html>
You have to make the div height = pageHeight(header height and appropriate margins should be minus).
.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
Think it has to do with the background-size.
Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.
background-size: contain;
background-repeat: no-repeat;
background-position: center;
could you prehaps show what you want with an image.
Related
So, I'm working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.
As seen here when I zoom out the background image duplicates.
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
}
.content {
margin: 0 auto;
position: relative;
width: 500px;
z-index: 999;
}
<!DOCTYPE html>
<html>
<head>
<title>The Sandbox</title>
<meta name="description" content="">
<meta name="author" content="Hades">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
<center>
</div>
<img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
</div>
<form>
<input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
</form>
</div>
</center>
</body>
</html>
Any solution to this or am I just gonna have to bite the bullet?
Give These two properties
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
To stop image from repeating "background-repeat" and to size for appropriate size "background-size"
You may need something like that. While using background-image, background repeating is by default on - so you need to set background-repeat property to no-repeat. And you need to adjust the background size and position as well as defining height of 100% for it and it's parent(in this case body).
html, body {
height: 100%;
}
#bg-image {
background-image: url("https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-repeat: no-repeat;
height: 100%;
background-size: cover;
background-position: center;
}
#form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#form input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<body>
<div id="bg-image"></div>
<form id="form">
<input placeholder="write here..." >
</form>
</body>
well your code is ok but when you use background-image by default it is going to repeat image until it fill element. you have to use background-repeat: no-repeat; to prevent it and take note it is not good at term of responsive to give body a background-image better use div instead. you can also use background-size: cover; to make sure image always fill whole element
you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.
background-repeat: no-repeat--> will make the background image is only shown once.
background-size: cover--> make the background image cover the entire background area.
background-position: center center--> make the background image be positioned in the center of the element (in this case, the body element)
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
You may need something like this. You can make it easy with display:flex and for background you can use no-repeat.
html, body {
height: 100%; // FOR HTML AND BODY HEIGHT
}
body {
background: url("https://ak.picdn.net/shutterstock/videos/1027045598/thumb/1.jpg"); /* BACKGROUND IMAGES */
background-repeat: no-repeat; /* NO REPEAT BACKGROUND IMAGE */
height: 100%; /* BODY HEIGHT */
background-size: cover; /* BACKGROUND SIZE */
background-position: center; /* BACKGROUND POSTION */
display: flex; /* FLEX FOR TAKE DIV IN CENTER */
justify-content: center; /* LEFT RIGHT CENTER */
align-items: center; /* TOP BOTTOM CENTER */
text-align: center; /* TEXT AND IMAGES CENTER */
}
input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<div class="center">
<img src="https://www.nicepng.com/png/full/166-1667158_dan-howell-signature-png-vector-black-and-white.png" width="150" vspace="20" border="0" alt="Hmmmm 404?">
<form>
<input type="password" style="background: ghostwhite;
font-size: 18px;
border: 1px solid lightgray;
width: 500px;
border-radius: 50px" />
</form>
</div>
Here I create one simple demo.
I hope it's help you :)
I have a background image that I need to be at the bottom of the entire page is the following:
.background-div {
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
background-image: url('./assets/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: 40%;
}
but in a view there is a moment that a data fetch is made that occupies half of the view and the background is left in half I do not know how to solve it when I place 100vh if the content is a lot it is cut, and if I put 100% it is cut in half while fetching the data
You can make full page image like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.background-div {
/* The image used */
background-image: url("assets/pattern.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="background-div"></div>
</body>
</html>
(source: https://www.w3schools.com/howto/howto_css_full_page.asp)
I am making a website and I stumbled upon a little problem.
I have the image set to be to height: 100% and width; and background-size: cover;
Is there any way I can make the footer appear so that you scroll UNDER the image?
.bg {
/* The image used */
background-image: url("./Resources/home_bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>
It sounds like you only need to add a z-index to your divs.
The footer would have the smaller number z-index, while .bg is the larger one.
Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.
.bg {
/* The image used */
background-image: url("http://placehold.it/400x400");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 10;
}
footer {
background: #ff0000;
position: fixed;
bottom: 0;
width: 100%;
z-index: 8;
}
.container {
height: 105vh;
}
<div class="container">
<div class="bg">BG</div>
<footer>footer</footer>
</div>
I have problem making my banners up and down my webpage scale to always fit the user's screen so I don't have horizontal scroll bars which is bad experience on mobile phones as desktops as well. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<style type="text/css">
body {
background-image: url("TBG_02.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}
#top,#bottom{width:100%;}
#top,#bottom{height:155px;}
#top{position: fixed;left:0;top:0;}
#bottom{position: fixed;right:0;bottom:0;}
.topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
.bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
</style>
</head>
<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>
</body>
And this is how the problem looks like:
https://imgur.com/a/WscYr3D
You may notice the bad gray/white space in the photo as well. To note: I will add some images as buttons above the banners. Any ideas?
Your approach is basically sound in using:
background-size: cover;
to ensure that the browser resizes the image to cover the whole of the <body>.
What you are missing though, is that the height of the body does not cover the whole height of the viewport.
To fix this, you can add:
body {min-height: 100vh;}
ie. the height of the body must never be less than 100% the height of the viewport (or 100 viewport-height units).
Working Example:
body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}
.top{
top: 0;
left: 0;
}
.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
The answer from Rounin was cool but it made some troubles; the only thing it missed is that there is no image to put in the divs so they can appear on the banners, then I had to set their width and height and playing with them a bit until it fixed :D
<body>
<div class="top">
<img src="BG_02.png" class="top"/>
</div<
</body>
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>