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%; }
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>
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>
I'm setting up an image that would change when you hover over it. I want the image to be adjustable so that it is full screen on any screen. Instead of putting a pixel size I tried to put a percentage size, but nothing shows up. Is there a better way to get that done?
<style type="text/css">
.urlImg {
display:block;
width: 1000px;
height: 848px;
background-image: url('01.jpg');
background-repeat: no-repeat;
}
.urlImg:hover {
background-image: url('02.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<center></center>
</body>
Use background-size combined with width and height of 100% (make sure the body extends to 100% as well):
.urlImg {
display: block;
width: 1000px;
height: 848px;
background-image: url('http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png');
background-repeat: no-repeat;
}
.urlImg:hover {
width: 100%;
height: 100%;
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
html, body {height: 100%; margin: 0}
(see it on the Full Page as well)
You can also play with absolute or fixed positioning (as #abhishek mention in the comment) to make it behave the similar way.
I've found a similar question here but with no answer, yet I can't find an alternative as a solution.
I have the following code and it works perfectly on Mac and Windows, however I can't figure out why on Android (either Chrome or Firefox) the background does not get updated when the user is scrolling down, it produces the space of about 1/5 of the screen at the bottom while scrolling down.
The background image gets updated after you release the touch.
html{
background-image:url(example.jpg);
background-position:fixed;
background-size:100% 100%;
}
Specify a height for your html and body, i.e.
html {
width: 100%;
height: 100%;
}
And
body {
height: 100%;
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
And add a div that will wrap everything inside body, i.e.
<body>
<div id="wrapmeup">
....your content....
</div>
</body>
And finally add this to your css:
#wrapmeup {
height: 100%;
width: 100%;
background-image: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}