I want the background image I am using to have 10px margins. But every time I try, it only works on the left side. How can I give my background image equal space on each side?
.login-page {
display: flex;
flex-direction: column;
background: url("../src/Assets/images/Books-background.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
Hou probably need 2 containers. Set a padding on the parent and the background on the child.
here an example with html & body, but it could be a div within another div, the method remain the same , padding on the parent, background cover on the child. .
html {
background: white;
padding: 0 10px;
}
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/id/20/3670/2462) center / cover
/*padding-box no-repeat bgcolor have no effect on background:cover ... */;
}
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 want the Mario image to be on top of that background in the screenshot below, as you can see it's working, however I'm not able to center the Mario image on top of the background. I would also like to remove the extra unwanted repeating pattern on the background image.
Code:
.marioHeader{
background-image: url("resources/marioBackground.jpg");
background-size: 600px;
height: 500px;
background-position: bottom;
margin: auto;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
height: 200px;
display: block;
margin: auto;
}
<div class="marioHeader">
<div class="headermario">
</div>
</div>
Image of how it looks:
For centering, you can use flexbox to do this easily: https://jsfiddle.net/tdfu3em1/2/
Just give the container div:
display: flex;
justify-content: center;
align-items: center;
Now the child div will be centered.
As for the repeating pattern, there's not enough info to know. Does it repeat in the original image? I'm guessing not, and you don't have no-repeat. But what do you want to happen in it's place? Nothing? Background color? Kind of depends.
I'm stucked. I've tried different solutions but it doesn;t work for me - I do something wrong.
I want to get 2 divs (there is more, but it should be enough to solve the problem): header and menu. Both of them have got background-images. I want to set 'menu' directly below 'header' using responsive approach.
<div id="header_main"></div>
<div id="menu"></div>
i CSS:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
I want to get divwith dimensions in line with its background images widht and height, but responsive. Please give me any adice how I can do it properly.
Right now two images appear on top of each other, that's why you would only be able to see one of them.
Try to wrap them in a seperate div and give display:flex to that div. This way you could achieve what you want I guess.
Change your position on the header to position: relative; and set both of them to display: flex;
Like this:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: relative;
display: flex;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
display: flex;
}
<div id="header_main">header</div>
<div id="menu">menu</div>
These are specific methods for creating responsive background:
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
And why do you give the elements position absolute and take them out of the normal flow? You can use maybe :
#header_main{
position: relative;
};
#menu{
position: absolute;
top:0;
left:0;
};
I have this to center it vertically and horizontally:
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
}
That works, but now I am trying to add padding. I would like to have 10px or 20px padding on all sides, so for mobile it has some padding. I've tried this:
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
background-origin: content-box;
padding: 20px;
}
But the right and bottom go over the viewport, so scrolling occurs and it's not centered exactly anymore. I've also tried using margin. Wondering how to get this to work. I would like to use CSS background-image if possible, instead of <img>.
Add box-sizing:border-box;
html {
width: 100%;
height: 100%;
background: url(http://www.fillmurray.com/460/300) center center no-repeat;
background-origin: content-box;
padding: 20px;
box-sizing:border-box;
}
This happens because CSS uses, by default, the content-box box-sizing method. It means that width = content width + padding + border and height = content height + padding + border.
You can switch to the border-box box-sizing method, that includes padding and border in width and height.
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
background-origin: content-box;
padding: 20px;
box-sizing: border-box; /* switches to border-box method */
}
I hope that helps you!
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>