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.
Related
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>
So, I'm working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.
As seen here when I zoom out the background image duplicates.
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
}
.content {
margin: 0 auto;
position: relative;
width: 500px;
z-index: 999;
}
<!DOCTYPE html>
<html>
<head>
<title>The Sandbox</title>
<meta name="description" content="">
<meta name="author" content="Hades">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
<center>
</div>
<img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
</div>
<form>
<input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
</form>
</div>
</center>
</body>
</html>
Any solution to this or am I just gonna have to bite the bullet?
Give These two properties
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
To stop image from repeating "background-repeat" and to size for appropriate size "background-size"
You may need something like that. While using background-image, background repeating is by default on - so you need to set background-repeat property to no-repeat. And you need to adjust the background size and position as well as defining height of 100% for it and it's parent(in this case body).
html, body {
height: 100%;
}
#bg-image {
background-image: url("https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-repeat: no-repeat;
height: 100%;
background-size: cover;
background-position: center;
}
#form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#form input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<body>
<div id="bg-image"></div>
<form id="form">
<input placeholder="write here..." >
</form>
</body>
well your code is ok but when you use background-image by default it is going to repeat image until it fill element. you have to use background-repeat: no-repeat; to prevent it and take note it is not good at term of responsive to give body a background-image better use div instead. you can also use background-size: cover; to make sure image always fill whole element
you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.
background-repeat: no-repeat--> will make the background image is only shown once.
background-size: cover--> make the background image cover the entire background area.
background-position: center center--> make the background image be positioned in the center of the element (in this case, the body element)
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
You may need something like this. You can make it easy with display:flex and for background you can use no-repeat.
html, body {
height: 100%; // FOR HTML AND BODY HEIGHT
}
body {
background: url("https://ak.picdn.net/shutterstock/videos/1027045598/thumb/1.jpg"); /* BACKGROUND IMAGES */
background-repeat: no-repeat; /* NO REPEAT BACKGROUND IMAGE */
height: 100%; /* BODY HEIGHT */
background-size: cover; /* BACKGROUND SIZE */
background-position: center; /* BACKGROUND POSTION */
display: flex; /* FLEX FOR TAKE DIV IN CENTER */
justify-content: center; /* LEFT RIGHT CENTER */
align-items: center; /* TOP BOTTOM CENTER */
text-align: center; /* TEXT AND IMAGES CENTER */
}
input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<div class="center">
<img src="https://www.nicepng.com/png/full/166-1667158_dan-howell-signature-png-vector-black-and-white.png" width="150" vspace="20" border="0" alt="Hmmmm 404?">
<form>
<input type="password" style="background: ghostwhite;
font-size: 18px;
border: 1px solid lightgray;
width: 500px;
border-radius: 50px" />
</form>
</div>
Here I create one simple demo.
I hope it's help you :)
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%;
}
My goal is to have a background image span the entire screen like this: http://playjudgey.com/
I am trying to change my background image to be grayscale, but every time I do, it changes all of the text that is written over the image. I assume that the filter is applying to everything that is inside of the my div. My code is below:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
</body>
So this is what I did for my CSS:
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('../img/money.jpg');
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
The issue is that the text I write is not red, but gray. Is there any way to code this differently so my text will appear colored? Or should I just turn the image grayscale through an outside program?
You can get this same effect with a blend mode, that applies only to the background, and besides, it has more support (FF)
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
font-size: 60px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('http://placekitten.com/1000/750');
background-color: gray;
background-blend-mode: luminosity;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
If you have no need to change the background color dynamically, I would just change it to grayscale in a basic image editor. CSS filter is not fully cross-browser compatible I believe anyways, so you will be safer that way (and easier).
If you were to keep things how they are now, though, you would just need to change the filter property on your text as its inheriting it from your parent div.
What if you put your hometext div outside of the wrapper, making them both absolute:
<body>
<div class="wrapper"></div>
<div class="hometext">
You are the best!
</div>
.hometext {
margin: 0 auto;
color: red;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
}
Additional CSS will be needed for styling and position, but here is a fiddle: http://jsfiddle.net/Lepe84tu/
Instead of putting the background image on .wrapper, you could make another div as a sibling of .hometext that has the image as the background - that way you can style the image and the text independently.
Your <div class="wrapper"> div is wrapping also your hometext div. You should try this:
.hometext {
width: 600px;
margin: 0 auto;
color: red !important;
text-align: center;
}
I try currently to make a navbar with images, the navbar should be in middle centered with the image repeated on both sides. However the picture is only repeating on the right side. Anyone got a solution?
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
i also found this but it is (above) only for the background, do i have to seperate the navbar in 2 container?
JSFIDDLE
Thats what i got so far.
Any help is appreciated.
you need set ul to text-align:center;
find updated fiddle
.navbar2 ul{
text-align: center;
}
Thank you locateganesh it worked, for some reason i got now some placeholders between the buttons seen on your updated jsfiddle. How did this happen? i didnt changed anything only the text algin center.
edit:
i got it to delete the spaces between the images.
.yourclass {
font-size: 0;
}
In css3, you can use multiple images for background-images.
All the background-? rules can be used with the same construct.
<html>
<head>
<title>Image Demo</title>
<style>
body{
text-align: center;
}
#nav{
background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="nav">some text</div>
</body>
</html>
Try it, but you'll need your own battery pics.