I've been trying to solve this problem for hours, and I've searched across the whole internet with no luck.
I'm trying to centre this background image in the page; however as shown here by using this method it stretches the width of the page, meaning that you can scroll past the width of the page.
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bground">d</div>
</div>
</body>
</html>
CSS:
div.container {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
}
div.bground {
position: relative;
width: 100%;
height: 100%;
left: -50%;
background: url('http://cdn.bleedingcool.net/wpcontent/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}
You have been moving container div for 50% to the right, that's why you got horizontal scroll-bar, not out of image but out of a div positioning.
Try out this css:
div.container {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
div.bground {
position: relative;
width: 100%;
height: 100%;
left: 0;
background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}
https://jsfiddle.net/m2oy2wmw/3/
I made you a fiddle, if this is what you are looking for.
You can always use "100vh" to have full height (even when resizing screen).
div.container {
height: 100vh; //100vh to always have 100% height.
width: 100%;
background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
background-size: cover;
background-position: center center;
}
<div class="container">
<div class="bground">d</div>
</div>
I think this is what you need, let me know what is not working for you...
body {
background-image: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<body>
</body>
Related
I know there are questions similar to this one, but none of them worked for me.
I have a div class with a background image:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
}
Is there any way to make the #index-box div class so high, that the whole background image fits in?
If you know the aspect ratio of the image you can put all in a container with percentage padding and relative position. then another box full width and height with absolute position for the content. For the below image the original size of the image is 1280X720, so the ratio height/width 0.5625:
#background {
position: relative;
padding-bottom: 56.25%;
background-image: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg');
background-size: cover;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="background">
<div id="content">some content<div>
</div>
Also, with similar way you always can use the image as an img element. so you even not need to know the aspect-ratio. like that:
#container {
position: relative;
}
#bg {
width: 100%;
display: block;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="container">
<img id="bg" src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"/>
<div id="content">some content</div>
</div>
try to apply this code:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
object-fit:cover;
}
or
body{
margin:0;
width:100%;
}
#index-box{
height:100%;
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
background-position:center;
}
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
This Page
Code:
html,
body {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: url("../img/background.jpg") no-repeat 50% 50%;
background-size: cover;
}
<div class="container-fluid background">
<div class="row justify-content-center">
<div id="particles-js">
</div>
</div>
</div>
Now I need to remove this white line and the scroll I need page full width and height background-image I tried overflow: hidden
but in mobile responsive have problem with login box.
Is late to say it but just put:
*{
margin: 0;
}
I just had this problem and found the explanation in this answer to be extremely helpful.
You might want to try using the following code to center your image:
html {
height: 100%
}
body {
background-image: url("../img/background.jpg");
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
This should remove that white line from the bottom of your page.
I'm trying to create a full screen background image that re sizes across devices.
The first content section I want to always appear at the "bottom" of the devices screen after the full image. I've done this already.
I now want to carry on adding div elements but the div gets pushed back to the top.
I think it may be my position tags..?
Code
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.content {
position: absolute;
top: 100%;
width: 100%;
background: #FF6969;
}
.moreContent {
height: 100px;
top: 100%;
width: 100%;
background: white;
}
html:
<div class="content">
Hello this is my content
<br/>
<br/>
<br/>
<br/>Lots of content
</div>
<div class="moreContent">
this should be below 'content' div
</div>
(also using bootstrap for the real project)
Fiddle
From what I understand you are looking for something like this:
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin:0
}
.content {
position: absolute;
bottom: -100px;
width: 100%;
background: #FF6969;
height: 100px;
}
.moreContent {
position: absolute;
height: 100px;
bottom: -200px;
width: 100%;
background: white;
}
<body>
<div class="content">
Hello this is my content
<br/>
<br/>
<br/>
<br/>Lots of content
</div>
<div class="moreContent">
more content...
</div>
</body>
I would do it a bit differently, considering I don't want to keep adding -100px, -200px etc to my div classes. That is a very dirty way of writing css.
So I would create a container Class for all my div elements:-
<body>
<div class="container">
<div class="content">
Hello this is my content
Lots of contentxxx
</div>
<div class="moreContent">
more content...vcbcvbcv
</div>
</div>
</body>
and then use the following css:-
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container{
bottom:0;
position:absolute;
width:100%;
}
.content {
height: 100px;
width: 100%;
background: #FF6969;
}
.moreContent {
height: 100px;
width: 100%;
background: white;
}
I personally find it much more general and elegant.
https://jsfiddle.net/8xrap3o5/6/
I have a webpage with an background-image with background-size:cover.
Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.
That's just one attempt that didn't work.
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons.
I hope you understand :-)
Best regards,
The One
Basically you can create a parent or wrapper element which would have the background image and then place all the elements like icons etc inside this and do all your positioning etc. So I've created this for you:
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
Here is an example on jsFiddle http://jsfiddle.net/j5cgt22z/
So each icon is positioned inside the container, the planets need to use position:absolute to float them around in the container space but the container needs to have position:relative so they are positioned in relation to their parent http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You can then use z-index on each position:absolute icon to stack each icon so the higher the z-index higher up the stack.
Hope this helps
After realising that there is no general solution for the problem yet. (object-fit isn't widely support).
I used the jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)