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>
Related
body{
background-image: url("web.png");
background-repeat: no-repeat;
width: 100%;
}
This is the code i tried, but it is not working and i also tried to use screen width as default width for the entire image.
You can set the background size by using background-size property. In case of covering the whole page please use background-size: cover;.
body {
background-image: url("https://picsum.photos/1080/1920");
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html 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.0">
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
To set the image as asked, you have to use background-size along with its attributes
(try these three and then select the one suitable for you)
body{
background-image: url("webp.png");
background-size: 100% 100%; /* used to set the image to fit 100% of the screen's width and height*/
}
body{
background-image: url("web.png");/* To cover the screen */
background-repeat: no-repeat;
background-size: cover;
}
body{
background-image: url("web.png");/*contains the image within the screen with with proper scale of the image*/
background-repeat: no-repeat;
background-size: contain;
}
I just tried out making a web page today and ran into a problem, looked everywhere to resolve the issue but didn't help please tell me what's I am doing wrong.
here is the HTML doc
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astrology</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="mtl">
</div>
</body>
</html>
Here is the style.css
*
{
margin: 0;
padding: 0;
background-color: wheat;
background-size: cover;
}
*.mtl
{
height: 100vh;
background-image: url("./images/mars_p.jpg");
background-repeat: no-repeat;
background-position: -1844px 1160px;
}
Here is the picture when I put background-repeat: no-repeat;
And here is the picture after removing background-repeat: no-repeat;
Tell me why this no-repeat is not working
The background-repeat: no-repeat; is working just fine, the problem is with this line:
background-position: -1844px 1160px;
The picture moves to bottom-left of the screen too far and cannot be seen. You can only see it when you set the image to repeat or fix the background-position property smaller.
I'm working on a project with a background-image that needs to fully cover the entire page. I am unable to use the property "background-attachment: cover" because this page also needs to be viewable on iOS, which does not support background-attachment.
.sky-background {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* cannot use this property */
/* background-attachment:fixed; */
}
<body class="sky-background">
</body>
I've been looking for alternatives to use for iOS, but I haven't found anything satisfactory so far. Can anyone offer any pointers?
You can try this.
html {
height: 100%;
}
body.sky-background {
height: 100%;
}
This is related to the document height. Try body {min-height: 100vh;} or better html {100%};.
Use this, hopefully It will help you.
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
Only adding height on your body element will do the work. Use height: 100vh; on .sky-background. Hope that'd help
.sky-background {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body class="sky-background">
</body>
</html>
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