I have a background image of size 1620*1080, and my screen resolution is 1366*768. How is possible that it doesn't cover about 15% of my screen (the right part)?
Here's my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
min-height: 100%;
min-width: 100%;
background-image:url(background.png);
background-repeat: no-repeat;
}
div#container {
margin: 0 auto;
background-color: red;
}
</style>
</head>
<div id="container">
</div>
<body>
</body>
</html>
As you can see I've added
min-height: 100%;
min-width: 100%;
thought maybe it would help. And background-repeat: no-repeat; is only there because it doesn't cover the screen.
Any ideas? Thanks!
Try this:
body {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
That'll give you a full-size background image whether the window is bigger or smaller than your image.
and if that doesn't work, read the rest of this css-tricks post.
Your image ratio is 1620/1080=1.5, and screen resolution is 1366/768=1.77. Essentially what is happening is the image is showing up at a smaller size, while being kept to scale. The area on the right is blocked off.
Try just posting the size
background-size:100% 100%;
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'm new to HTML and I currently have the following code stored in a .css file. What is the best way to allow for auto resize if the user changes the window size? I tried to use the following code to allow for this but I was not able to get the intended result.
body {
background-image: url('Images/Space.jpg');
text-align: center;
}
text {
color:white;
}
img {
width: 100%;
height: auto;
}
width 100% makes responsive, image cover does the same, but more usefull no need to set width or height
* { margin: 0; padding: 0; }
body {
background: url(https://www.w3schools.com/css/img_flowers.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Try using CSS background-size Property.
body {
background-image: url('Images/Space.jpg');
background-size: 100%;
text-align: center;
}
I am trying to set an image as a background, but it doesn't fit at mobiles:
Is there another way to make it without changing wallpapers with a #media attribute?
My HTML and CSS:
body {
/* Location of the image */
background-image: url(../img/background.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<h1>ALOOOU</h1>
</body>
</html>
Add a viewport height to your body for mobile like this:
#media (max-width: 768px) {
body {
height:100vh;
}
}
Try using it as a full width background on the html tag:
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;
}
body tag only to 100x100px .this img tag full of window.
body {
height: 100px;
width: 100px;
/* normal body */
}
.CanvasImg {
background-position: center center;
background-attachment: fixed;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
background: url("http://sendeyim.net/uploads/resim-galerisi/3d-masaustu-resimler_468650.jpg") no-repeat;
background-size: cover !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !impoertant;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<img src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
class="CanvasImg"/>
<h1>ALOOOU</h1>
</body>
</html>
use css:
body{height:100vh;
box-sizing:border-box;
overflow-y:hidden;}
CSS3 gives us viewport-relative units:
vh is relative to 1% of the height of the viewport ,using 100vh will cover the full screen.
using overflow-y
hidden will remove horizontal scrolling
border-box indicates that the width and height properties (and
min/max properties) includes content, padding and border, but not
the margin
I am having trouble centering my background. Whether I change the BG into small size to make it center it won't.
Her is my CSS:
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center center;
height: 1813px;
width: 1024px;
}
It doesn't center the background - it keeps going to the top left of the monitor even though using a smaller size photo. Thank you all!
To centralise the background image you don't need to specify center center twice. It should be as follows:
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center;
height: 1813px;
}
Your code works as aspected, if you remove the width you will see exactly the image centered in the background...
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#container {
background-image: url('http://supermario3dworld.nintendo.com/_ui/img/views/power-ups/char-dobble-mario.png');
background-repeat: no-repeat;
background-position: center; /* you dont need to specify the value two times */
height: 1813px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
should work, one other thing you could do is make a div and put the img in it, then use -1 z-index and just center the div.
You could also try adding
body {
min-height: 100%;
}
because the container might not be the full viewport size.
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