<head id="Head1" runat="server">
<title>Title</title>
<style>
.parallax
{
/* The image used */
background-image: url(Pictures/BackUS.png);
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="parallax"></div>
"aa" is the page which the code is in, the picture is the folder "Pictuers" and it's named BackUS.png. All of it in folder "User".
How to write this line:
background-image: url(Pictures/BackUS.png);
If the Pictures Folder is in the same folder as the html code this should work. Please be aware the div must have a size to see the picture in the back. (You should adapt the size to the picture pixels.)
<body>
<style type="text/css">
.parallax {
/* The image used */
background-image: url(Pictures/BackUS.png);
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="parallax" >Hello</div>
</body>
You're missing the quotes around the path.
background-image: url("Pictures/BackUS.png");
Try this,
background-image: url(../Pictures/BackUS.png);
Related
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 don't need scroll-bar. How to remove scroll bar from the display?
<!DOCTYPE html>
<html>
<style>
body{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
<img src="flamingo.JPG" usemap="#flamingo-map" />
</body>
</html>
Use the following CSS that will help you, put image path in background-image property. Following code will help you.
<style>
body{
background-image:url('flamingo.JPG');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<style>
<body>
</body>
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.pinimg.com/originals/be/26/a5/be26a57beb694df3cb91916cafb2d3b1.jpg);
overflow: hidden;
}
.img{ max-width: 100%;
max-height: 100%;
min-width: 100%;
object-fit: cover;
}
<body>
<img class="img" src="https://i.pinimg.com/originals/be/26/a5/be26a57beb694df3cb91916cafb2d3b1.jpg" usemap="#flamingo-map" />
</body>
If u need an image as a featured image then u use this code. If u need an image as a background then use the previous answer. Hope this code will useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.image{
width: 100vw;
height: 100vh;
overflow: hidden;
}
img{
max-width: 100%;
max-height: 100%;
min-width: 100%;
}
</style>
</head>
<body class="image">
<img src="path">
</body>
</html>
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 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%;
}
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;
}