I am using the following code to create a background image for my site. It is working and making it a full screen background, However, It shrinks my image up, I am not understanding why. It looks like it takes about an inch off of every side.
Here is the code, directly from CSS tricks
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
here is my full css
/*!
* Start Bootstrap - Full HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
* {margin: 0; padding: 0;}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
html {
background: url('/images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#thanks {
position: absolute;
width: 300px;
height: 75px;
z-index: 15;
top: 98%;
left: 50%;
margin: -100px 0 0 -150px;
text-decoration: none;
text-align: center;
font-size: 36px;
background-color: #3a1e49;
color: #edcd05 !important;
font-family: "Times New Roman", Times, serif;
border-radius: 25px;
}
#thanks:hover {
background-color: #edcd05;
color: #3a1e49;
}
#thanks a {
color: #edcd05;
text-decoration: none;
position: relative;
bottom: 10%;
}
#thanks a:hover {
color: #3a1e49;
}
Below is the HTML
<!DOCTYPE html>
<html class="full" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Demo</title>
<link href="css/full.css" rel="stylesheet">
</head>
<body>
<!--
<div id="thanks">
<p>Share a Memory</p>
</div>
-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
you made your image cover this means it will extend over the screen.
make sure that your image is larger than (or equal) your screen resolution.
for EX:
if your screen resolution is 1024 * 728 then the image width should be larger than 1024 and the height 728.
Related
I've been trying to create a landing page for my website. I'm stuck in putting the background since it doesn't cover the whole page even if I set the width to 100%.
It looks like this, even if it's not zoomed out or in.
Notice the huge white part on the right side
So far, this is the only code that I have
CSS
*{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container {
width: 100%;
height: 100vh;
background: linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../../assets/images/background.png);
background-position: center;
background-size: cover;
}
HTML
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEQR</title>
<link rel="stylesheet" href="dashboard.component.css">
</head>
<div class="container">
</div>
</html>
width: 100%;
height: 23vw;
background: url('srcimgs/topsvg.svg') no-repeat;
this may help you adjust the height
Try this solution that i have used for my Homepage
.heroImage{
background-image: url('./assets/wallpaper.jpg');
background-attachment: fixed;
background-size: cover;
}
use these CSS properties in your background img tag. I hope this helps.
So I tried everything that I know of and don't know why this isnt working please send help.
max-width/height didnt work there is always a small gap between html and border. And if I want to style the background with a linear gardient fo example there is always a small line wether it is right or at the bottom, I only can style it with th background-color. Here is the code:
html{
[![width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow-x: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(to left, black, gray);][1]][1]
}
[1]: https://i.stack.imgur.com/N04VV.png
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: linear-gradient(to left,black, gray );
}
</style>
<body>
</body>
</html>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I want to set a full size div in css but it keeps set margin.
As you can see, the background color i set on html is still visible.. how can you avoid this and make my div full size?
body,
html {
height: 100%;
background-color : red;
}
#front-bg {
background-image: url('https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front-bg h1 {
color: white;
font-size: 5em;
width: 100%;
position: absolute;
bottom: 15%;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My site</title>
</head>
<body>
<div id="front-bg">
<h1>Stack Overflow</h1>
</div>
</body>
</html>
try
body,
html {
height: 100%;
background-color : red;
margin: 0;
}
The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.
I don't know if the problem is in the css or the html file.
body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Because you set background-image for two element (html and body). A simple webpage layout like this:
<html>
<head>
</head>
<body>
</body>
</html>
You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.
body{
margin: 0;
padding: 0;
background-image: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
add this media code
#media screen and (max-width:500px){
body, html {
background-size:100% 100%;
}
}
You don't need to set bckgound for html and body. Only set the background for body.
body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div.
Would you please help me to remove it?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>first</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/first.css" rel="stylesheet">
<style>
body{
background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
background-size:100%;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="content">Lorem Ipsum is simply dummy text of </div>
</body>
</html>
.cover{
height: 1232px;
width: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
.content{
width: 100%;
height: 100%;
background: gray;
margin: 0;
padding: 0;
}
You need to make the body and the html go to the bottom of the page:
body, html {
min-height: 100%;
}
and then set the background to background-size: cover;: https://css-tricks.com/perfect-full-page-background-image/
You could do something like this:
<div id="yourdiv"></div>
#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope it helps!
Sounds like it's probably due to your background image not filling the full space available.
Try adding this to the body (the element with the BG image);
background-size:cover;
Note that this will not work well on old browsers