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 :)
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 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 was put .svg file as background image.
in small screen it was ok, but when i show in large screen it was cut from top and bottom
i want to show background image in full height/width as original size in large and all screen
demo image
-here is my code
.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
</body>
</html>
You have to make the div height = pageHeight(header height and appropriate margins should be minus).
.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
Think it has to do with the background-size.
Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.
background-size: contain;
background-repeat: no-repeat;
background-position: center;
could you prehaps show what you want with an image.
Basically I am trying to do whats device here :
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Have my image in the background has an id on a div.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
width: 324px;
height: 250px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
instead of centering the image disappears..
You forgot a semicolon after your
background-image: url("http://i.imgur.com/7h8ejPJ.png")
Also add width and height property to your image div to 100%.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png"); /* add semicolon here*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
width:100%; /*add width*/
height:100%; /*add height*/
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
The problem was you were setting a width and height and the image was wrapped within this, so the image was limited with in this boundaries and hence you see the part of image being not visible, and on scroll it completely gets hidden, because the image div is scrolled up..
background-image: url("http://i.imgur.com/7h8ejPJ.png") is missing ; in the end of line.
Your code is missing a semi-colon at the end of the declaration ... It should be
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
....
}
The semi-colon is required to separate between each declaration. It's only allowed to be removed if the declaration is the last one.
This workes perfectly for me.
#idbackground {
background: url(http://i.imgur.com/7h8ejPJ.png)
}
Like Reddy said, make your width and height equal to 100% in your image div.
Should you ever use a non-square image use min-width and min-height properties with a value of 100% to square up to whichever axis is larger.
Also if you'd like you can save yourself typing by consolidating all your background properties into one shorthand background property like such...
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center;
height: 100%;
width: 100%;
}
The shorthand syntax for the background property is as follows...
background: [color] [url(img.jpg)] [repeat_value] [attachment_value] [position_value(s)];
Just make sure you include spaces between each value and replace the bracketed items with the corresponding background- prefixed value. If left out or blank they will just be set to their default values.
Thus, a cleaned up version would be...
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; /* consolidated background shorthand */
height: 100%;
width: 100%;
}
... with the same HTML markup.
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;
}