I need to stretch the background image on the screen and fit when resizing it on this website DELETED, does anybody know?
<body>
<div id="background"></div>
...
</div>
</body>
The CSS file:
html, body { }
body { height:100%; width: 100%; }
#background{ position: fixed; min-height: 1024px; height:100%; min-width: 100%; width: auto; background-repeat: no-repeat; z-index:1 }
Thank you in advance
You'll find everything you need here:
http://css-tricks.com/perfect-full-page-background-image/
Related
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%; }
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.
I have a huge image (3000px on 2000px) and I would like to set this image as a background of website and adjust proportions of the image to the window. So far I am doing this:
body {
background: url('image.jpg') !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center !important;
}
The image is set up on the background, but it's not completely visible - just the "center" of the image, not the whole image.
Is there any way to do it with using CSS?
I think you want this:
* {
margin: 0px;
padding: 0px;
border: 0px groove;
}
body {
width: 100%;
height: 100%;
background-image: url(picture);
background-size: 100%;
}
Use background-size:100%;
Also, Check this link for further reference.
You can do the following in your css
html
{
height:100%;
width:100%;
}
body{
margin:0px;
padding:0px;
height:100%;
width:100%;
background-image: url(picture);
}
to remove any margins or padding and set the Body to full
to do it with html page only
<html>
<body background="bgimage.jpg" style="height:100%; width:100%;">
<h1>Hello world!</h1>
</body>
</html>
See the W3schools example below
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_body_background
I'm trying to give my page a full background in its body but nothing is working and the output I'm getting is rubbish.
I've tried everything I could think of, but nothing is doing right. Can you please tell me where my mistake is? (the .jpg is in the correct place)
<html>
<head>
<style type="text/css">
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) repeat fixed 100% 100%;
}
#container {
width: 979px;
height: 100%;
margin: 0 auto;
background-color: blue;
}
</style>
<title> Baisbook </title>
</head>
<body>
<div id="container">
<p> Just saying Hi! </p>
</div>
<p>This is a Test</p>
</body>
</html>
I think yhe image not exist or the image path is not correct.
or try this
background-image:url('background.jpg');
This statement is enough
Is your image able to show up but not filling all the wanted area? If it is then try this sample codes in your body area to see if it works.
body {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In background-image remove the image put just background and background position is center top....
body {
height: 100px;
width: 100px;
background:url(background.jpg) no-repeat fixed center top;
}
use below code
body {
background:url(your image path) repeat fixed 100% 100%;
background-attachment:fixed;
background-size:100%;
background:url(your image path) repeat fixed center center \9;
/*IE 9*/
background:url(your image path) repeat fixed top 100% /IE9;
background-attachment:fixed /IE9;
background-size:100% /IE9;
}
if Ok with you to used basic css code to apply background-image
Instead of these
body {
height: 100px;
width: 100px;
background-image:url(background.jpg) no-repeat fixed 100% 100%;
}
try this
body {
height: 100px;
width: 100px;
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:fixed;
background-size:100%;
}
Working demo