Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
Related
I have made a Login page with the HTML file as follows
<div style =" height : 100vh; background-image: url(../../assets/login-bg-1.jpg); margin:0;
padding:0; background-repeat: no-repeat; background-size:cover; background-position: center;
width: auto;">
------
--
</div>
Now I want the background image to take up the whole screen but still vertical scroll shows and it's not hidden
I tried
overflow-y: hidden too.
The scroll hides only two conditions
1. When I type height:97vh;
2. When I type margin:-8px the background image disappears and scroll hides.
I don't understand it.
try width:100% and height:100% .
Put height as 100% instead of 100vh and don't put inline styles, it is a bad practice.
height: 100%;
Update:
Add margin:0 to the body, as it has default margin.
Will this do?
body {
margin: 0;
height: 100vh;
background-image: url(https://www.fillmurray.com/600/500);
background-repeat: no-repeat;
background-size: cover;
display: grid;
place-items: center;
}
.login {
color: white;
padding: 2rem;
border: 2px solid white;
}
<div class="login">
Log in here
</div>
i am facing a problem with my CSS. how can i use full background image after using margin in CSS? i have already used 2.5% background whole body but when i am going to use the background in my CSS code i am seeing that background also captured by 2.5% margin. i want to remove this margin when i will background and the background will cover the full body.
thanks
here is code
html{
margin: 2.5%;
}
.second-section{
background: url(resources/img/Header/out-bg.png);
background-size: cover;
}
click here for Image
I used position: absolute and it worked well.
There is an example
Since you are giving margin for the page, you will always get a space of 2.5%. position:absolute; helps in this case as .second-section wouldn't be subject to the margin you have given.
Please check the code below:
html{
margin: 2.5%;
}
.second-section{
position:absolute; <-------- ADD
background: url(resources/img/Header/out-bg.png);
background-size: cover;
}
You can also give the same margin but in negative with width: auto to your image container.
html {
margin: 2.5%;
}
body {
margin: 0;
}
.section-section{
background-image: url(https://images.unsplash.com/photo-1627483262268-9c2b5b2834b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3000&q=80);
background-size: cover;
width: auto;
height: 400px;
margin: -2.5%;
}
<html>
<head></head>
<body>
<div class="section-section"></div>
</body>
</html>
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
body {
height: 100%;
background-color: #f8f8f8 ;
background-image: url('images/bottom-right.png'); /*Images*/
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
so i have this code that put the image in the bottom right of the body, but the problem is its not positioning in the way that i want it. It goes to the right but not in the bottom. It's only as tall as the content inside it, just like a div or anything else. Can u please help me to achieve what i want.
here is the image -> http://tinypic.com/view.php?pic=2iabd3p&s=8 thanks
You also need to set a height on the html and remove the margin on the body:
body {
height: 100%;
background-color: #f8f8f8;
background-image: url('http://www.placehold.it/100x100');
background-position: right bottom;
background-repeat: no-repeat;
margin:0;
padding:0;
}
html {
height:100%;
}
jsFiddle example
Simply setting height: 100%; isn't going to work in all instances. While I generally dislike using CSS2 position too often this may help you in this situation...
body, html
{
bottom: 0px;
left: 0px;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
}
Have a look at this page: rozbub
As you see, there is a fix header on the top and a scrollable content below. The content inside the black div scrolls well, but the image is fixed. How can I let this image scroll too?
Basically, I defined the main wrappers as following:
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
}
#generalWrapper{
height: 100%;
}
#header{
height: 70px;
width: 100%;
background: #080808;
}
#content{
overflow: auto;
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
background: url("../images/background.jpg");
background-repeat: repeat-y;
}
with a structure like
<body>
<generalWrapper>
<header>
</header>
<content>
</content>
</generalWrapper>
</body>
Then, the content div is filled with elements (which make this div taller than the screen and results in scrollability). But why is the background image not affected?
It looks like you are scrolling divs inside your content div, but the content div itself is not scrolled.
Try to look through the list of errors found on your site by W3C's Markup validator.
I tried a different approach. First of all, I put the background image on the html, with following attributes
html{
background: url("../background.jpg") center center #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then, I changed the header and content to
#header{
height: 70px;
width: 100%;
background: #080808;
position: fixed;
z-index: 55;
box-shadow: 5px 5px 5px 5px #080808;
}
#content{
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
}
which results in exactly that behaviour I desired (Although the problem considered by Jules Mazur in the comment is not solved, I will try to solve this by providing different images for different resolutions).
Try setting the background-attacment to scroll. MDN has documentation for this property.