I am trying to get my background to fill 100%. It currently is on every page except where the content gets too large (see photo (http://i58.tinypic.com/2n18hn8.png)). I have tried a bunch of different things to fix it but nothing is working. If I change the #page-wrapper to 3000px it will display the background fully, but then is too large on other pages. Please help
html,
body,
#page {
height: 100%;
}
#page-wrapper {
min-height: 100%;
min-width: 960px;
}
In your body class
body{
background-size:cover;
background-image: url('img/cover.png');
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000;
overflow: hidden;
}
Try this and let me know what you think.
Related
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 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%; }
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
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;
}
I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!
CSS :
body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!
Any help would be appreciated.
EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.
I don't know why they downvoted the question! But this is how I solved it!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mybody {
background: url('images/bodybg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myheader {
background: url('images/headerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
EDIT: I created a DEMO with some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMO works but was not as extensively tested as the quoted code below.
I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.
Start by setting properties of html and body.
Then, I have a root div inside body called background.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#background {
background: #000000 url(urlHere) no-repeat bottom left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
Again, some of that I'm sure is unnecessary, but I hope it helps.
You can do this by adding property background-attachment: fixed;
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
DEMO
But you must know that if ratio of page dimension and image dimension are diferent then image can be cutted in window.
EDIT
If for you height is more important change parameter backround-size to containt:
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
background-attachment: fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
Contain Demo
Why not import the img's into Flash (Microsoft Program) and convert the img's into Vector IMG's (Vector: Images who's quality isn't effected (as much) when Altering the height and width.) After making adjustments to the vector img (changing the img to the resolution of your current platform) save it and apply it to your HTML. I would advise making a backup copy especially if your cross platforming you HTML for different resolutions.
You need set the height for first element of page.
html, body { margin:0; height: 100%;}