The following code is unable to place the image at the center of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("../images/dandelion.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
This is what I am getting.
Your body is only as tall as the things inside it, so its actually centering correctly.
To get the result you want, you need to either make the actual page longer by adding things to it, or this to work around:
html,body{ height:100%; }
Note that you need to have html in there too because percentage height is relative to its parent (<html> is a parent of <body> in this case)
u may want to try something like this fiddle
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: center -25%;
background-size: 50%;
height: 100%;
width:100%;
}
Checkout this Fiddle (jsFiddle).
You need to reset default properties and give these some styles as your containers such as <html> and <body> are adjusted according to the content inside it (in this case the image).
Apply these styles:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
background-image: url("http://placehold.it/200x200");
background-repeat: no-repeat;
background-position: center center;
}
Hope this helps!
Give html and body height 100% and background position 50% 50% or center center.
html {
height: 100%;
}
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: 50% 50%;
height: 100%;
}
Related
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'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>
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.
How would one ensure that certain content is always fitted inside a particular area of a web page?
As an example, I would like the sentence "Fit this inside" to appear inside of the background image. Here is my test.html file:
<!DOCTYPE html>
<html lang="en">
<link href="test.css" rel="stylesheet" type="text/css">
<body>Fit this inside</body>
</html>
Here is my test.css file:
body
{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
This results in the text "Fit this inside" appearing at the very top of the page, and not inside the background image area.
What is the correct method to do this?
JSFiddle: http://jsfiddle.net/u3TAF/
Look at my comment higher.
You've set the background image to be 68% height. set the text into container with same properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
body
{
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
}
div.container {
position:absolute;
top:16%;
height: 68%;
left: 0%;
overflow:auto;
}
</style>
</head>
<body>
<div class='container'>
Now it's fit!
</div>
</body>
</html>
I think the best option would be to put the text within a DIV and then apply the styles to that element. Somewhere along the lines of:
<html>
<head>
<style type="text/css">
#test{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>
The background image should be given to the parent element. In your case, in the CSS, attach the background image property to the <html> element. So this image would act as a background to all the content of this page.
If that is what your aim is, then:
html{
background: url('bg_img.png') no-repeat center center fixed;
}
I'm trying to give my page a full background in its body but nothing is working and the output I'm getting is rubbish.
I've tried everything I could think of, but nothing is doing right. Can you please tell me where my mistake is? (the .jpg is in the correct place)
<html>
<head>
<style type="text/css">
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) repeat fixed 100% 100%;
}
#container {
width: 979px;
height: 100%;
margin: 0 auto;
background-color: blue;
}
</style>
<title> Baisbook </title>
</head>
<body>
<div id="container">
<p> Just saying Hi! </p>
</div>
<p>This is a Test</p>
</body>
</html>
I think yhe image not exist or the image path is not correct.
or try this
background-image:url('background.jpg');
This statement is enough
Is your image able to show up but not filling all the wanted area? If it is then try this sample codes in your body area to see if it works.
body {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In background-image remove the image put just background and background position is center top....
body {
height: 100px;
width: 100px;
background:url(background.jpg) no-repeat fixed center top;
}
use below code
body {
background:url(your image path) repeat fixed 100% 100%;
background-attachment:fixed;
background-size:100%;
background:url(your image path) repeat fixed center center \9;
/*IE 9*/
background:url(your image path) repeat fixed top 100% /IE9;
background-attachment:fixed /IE9;
background-size:100% /IE9;
}
if Ok with you to used basic css code to apply background-image
Instead of these
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) no-repeat fixed 100% 100%;
}
try this
body {
height: 100px;
width: 100px;
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:fixed;
background-size:100%;
}
Working demo