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>
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%; }
I want to create a page contains only one svg element that fit width and height and has maximum possible scale.
Related questions
How can I make an svg scale with its parent container?
How to resize an image to fit in the browser window?
didn't work, but combination of proposed methods solved the problem.
1) replace width="A" height="B" in opening <svg ...> tag to viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".
Now it nearly works But not very accurate because browser automatically adds margin: 8 to body's style (even if there is not <body> tag in .html file). So
2) add <style> body { margin: 0 } </style>
This might help. I used this CSS to fit a background image to width and height and it scales down accordingly to the browser.
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
You can set your SVG in a DIV and add a class to it, then you simply use the above CSS to scale the DIV's content.
put your image in a div, and apply these css rules:
div{
height:100vw;
height:100vh;
}
svg{
height:100%;
width:100%
}
Here is the solution for you guys. Check the link here
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
.svg-cont {
width: 100vh;
height: 100vh;
display: flex;
justify-content: center;
margin: auto;
}
.svg-cont > svg {
width: 100%;
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;
}
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.