Right now my footer is appearing at the top of my page but I'd like it at the bottom, if its rly simple sorry im pretty new to html.
here is my file the css is internal
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
}
<body>
<main>
<img src="img/logoanimated.gif" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
You have the position in the .middle class, as fixed, which means it will be on top of everything, so if you change the position to relative or some other than fixed, it should work.
You can use the position property to position things. In this case I used fixed to fix the footer at the bottom, then the inset property for the shorthand of top, right, bottom, and left properties. More on positions and how to use it here.
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
position: fixed;
inset: auto 0 0 0;
}
<body>
<main>
<img src="img/logoanimated.gif" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
I gave to footer position: fixed bottom:0 left:0 and width:100% and some sample photos for the background.Also i got footer inside div . I came to this result. I hope it works for you
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style>
.middle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url("https://picsum.photos/id/235/200/300");
background-size: cover;
background-position: center center;
}
.footer {
background-color: black;
color: white;
position: fixed;
bottom: 0;
left:0;
width:100%;
}
</style>
</head>
<body>
<a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300.jpg"
class="middle"></a>
<div class="footer">
<p> This website is under construction<br>Copyright © 2022 example.</p>
</div>
</body>
</html>
Here try this code, I got rid of the all the css in the .middle class, and it centers the image, and puts the footer at the bottom of the image, though you do not want to really ever use fixed position on a footer, because it will always be visible at the bottom, and you don't want that. What you should do, is make is static.
As I was looking at your code, the reason why your footer was above everything, is because you made that image fixed, which means everything will flow to start. So think of the fixed position this way: Pretend you have two boxes, stacked ontop of each other, then you slide the bottom one all the way out. When you slide the bottom one off, the top one falls in place of the other one. The bottom box had the fixed position, so it moves out of place, and it is always in that exact location, even if the window scrolls, it will always in that place, that is why it is called fixed. So just keep that in mind, when you add a fixed position to anything, it "raises" it up and everything "flows" underneath it.
.middle {
display: block;
margin: auto;
}
body {
background-image: url("img/background.webp");
background-size: cover;
background-position: center center;
}
footer {
background-color: black;
color: white;
}
<body>
<main>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQytQQam75A2ZQMpeZ01oSraB9OHEvBqprjtw&usqp=CAU" class="middle">
</main>
<footer>
<p>This website is under construction<br>Copyright © 2022 example.</p>
</footer>
</body>
Related
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>California Road Trip</h1>
<h2>Driving the Coast of California</h2>
</header>
<p>
Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
<br />
<b>Call for help now!</b>
</p>
<p>
<video controls="controls" autoplay height="300" width="500" loop>
<source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
</video>
</p>
<div>
<img src="columbus-nav-850x637.jpg" alt="Background Image" />
</div>
<footer>
Copyright © 2016.
</footer>
</body>
</html>
CSS:
header{
color: #000;
text-align: center;
border: 500px;
background-color: rgba(255, 190, 0, .5);
border-radius: 20px;
}
p{
text-align: left;
margin-left: 20px;
font-family: sans-serif, Arial, 'Myriad Pro';
}
div{
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
}
footer{
position: fixed;
bottom: 10px;
margin-left: 10px;
}
The background image is not taking up the entire screen. Any help is appreciated.
Here is a JSfiddle
You must set div img rather than just div. Give the element a height and width of 100% and it should cover the viewport.
div img {
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
height: 100%;
width: 100%
}
Background image is a css property, but you're trying to apply it to an image tag. You'll want to do something like this:
HTML:
<div class="myBackground"></div>
CSS:
.myBackground{
background-image: url(columbus-nav-850x637.jpg);
background-size: cover;
/*You can make this background fixed on desktop by adding this:*/
background-attachment: fixed;
}
Add these properties to div section in css file
{
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
The image you wish to serve as background for your page is placed in a div smaller than your page's size. And hence even if the image filled the div, it won't fill the page.
One of the possible solutions is to apply background image directly on body as suggested by Richard.
However, if you want your image to be in a separate div, you will first need to make the div cover your entire page. Minor update to CSS properties should do it.
div{
position: fixed;
top: 20px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: .5;
background-size: cover;
}
Next thing you need to make the image cover the entire div. You can either do it by setting
width: 100%;
height: 100%;
on img tag, or removing the img tag altogether and adding
background-image: url("columbus-nav-850x637.jpg");
in css for the div itself. You might also need to set proper z-index on your "background" div to layer it behind other contents of the page.
Сheck the "background-attachment" parameter. It should not have the value "fixed"!
I am attempting to build a, simple, single page website with only css as an exercise to familiarize myself with css.
I have three background images stacked on each other. Each image is set to a height of 100vh. This gives each image a nice look but I tried using the 'top' attribute to place text in the middle of the page, the text didnt move.
Can someone tell me why 'top' doesnt work in this circumstance? And a way to get around it?
This is my CSS:
#page1 {
background-size: cover;
background-image: url('Page1_f09078_f06078_1000_vertical.png');
height: 100vh;
display: block;
}
#welcome {
text-align: center;
top: 50%; <-- This attribute won't work
}
#page2 {
background-size: cover;
display: block;
background-image: url('Page2_f06078_ffa860_1000_vertical.png');
height: 100vh;
}
#page3 {
background-size: cover;
display: block;
background-image: url('Page3_ffa860_f09078_1000_vertical.png');
height: 100vh;
}
This is my html:
<html lang="en">
<head>
<link href="SinglePage.css" rel="stylesheet">
</head>
<body>
<div id="page1">
<h2 id="welcome">Welcome!</h2>
</div> <!-- End of page1 -->
<div id="page2">
</div>
<div id="page3">
</div>
</body>
</html>
top, left, right and bottom css properties work only when used with relative, absolute or fixed position.
Use following css:
#page1 {
position: relative;
}
#welcome {
transform: translateY(-50%);
text-align: center;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
The top, right, bottom, and left properties specify the position of positioned elements.
Go through this link: https://developer.mozilla.org/en/docs/Web/CSS/position
Add Position:relative;
#welcome {
position: relative;
text-align: center;
top: 50%;
}
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.
Sorry if this is a stupid question, but I'm having trouble with a 404 error page I'm trying to make.
Basically, I've set it up as a 'Where's Wally' style page with a large background image. I'm trying to create a transparent button to click on that will return the user to the page they were just on, but I need it to be relative from the centre of the page as I'm trying to ensure it will work on all screens.
Here's the code I have so far:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.website.org/404.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
p.pos_fixed {
position: center;
position:relative;left:-50px
</style>
</head>
<body>
<p class="pos_fixed"><a href='javascript:history.back()’><img src=‘http://www.website.org/button.png’></a></p>
</body>
</html>
Can anyone see a way to do this? I'm also very open to suggestions if there's a much better way I'm missing.
Thank you in advance!
Update: New code.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.pophatesfags.org/404two.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 50px solid red;
}
</style>
</head>
<body>
<a class="button" href="javascript:history.back()">Link Here</a>
</body>
</html>
I think this is is what you are after.
It positions the button dead center of the page and then pushes it left 50px;
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 1px solid red;
}
<a class="button" href="javascript:history.back()">Link Here</a>
Note This is responsive in that it will always center first but the 50px value is, in itself, not responsive...you might want that to be a percentage value too.
I have managed to get the button image in place correctly but now the positioning is all off.
I want it to be centered as this image shows:
What I have so far is here: http://codepen.io/anon/pen/snjCu.
I am trying to position the image inside the center of its column so that it is correctly in place when the screen is larger.
Any help is appreciated.
<footer>
<div class="banner">
<div class="container-fluid">
<div id="footer-controls" class="text-center">
<div class="col-xs-4"><i class="fa fa-picture-o"></i>
<span>GALLERY</span>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4"><i class="fa fa-file-text-o"></i>
<span>LEGAL</span>
</div>
</div>
</div>
</div>
</footer>
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}
You can adjust the position of the image with a CSS transform
Codepen Demo
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;
top: -50px;
left:50%; /* push the image half-way over */
transform:translateX(-50%); /* bring it back half its own width */
/* or margin-left: -50% of image width */
}
Although not desirable, I've found that giving the column and the orange-button fixed width styles will solve this issue.
.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;
Usually you can center background images with:
background-position: center center;
This is actually the default value.
However your container with the image is not centered.
You may wanna consider repositioning the container and trying somthing else than position: absolute;