I have a background image:
<div style="background-image: url(images/Home/diamond.png); height: 2600px; width: 100%; border: 1px solid black;"></div>
On the page the image covers all the center and right, but not the left. When I tried width 100%, it did not spread across the page like my other div. If this helps, this div element is a child of a section element and a parent of many other multiple div elements.
Try this:
html {
background: url(images/Home/diamond.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can try this:
div
{
background: url("images/Home/diamond.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
Hope this helps!
Try using width:100vw; this can work for you.
Related
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
I've added an background to a div class. What I want is for the image height to always have the same height as the browser window, which I tried to achieve with min-height= 100%. I don't get it to work though.. Any suggestions?
HTML:
<div id="top" class="jumbotron">
</div>
CSS:
.jumbotron {
background: no-repeat center center url('top.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
margin: 0px;
}
Add this to your jumbotron class:
min-height: 100vh;
Working fiddle: https://jsfiddle.net/dgo3sz0a/
The body and the html have to fill the 100% height:
html, body {
height: 100%
}
I have a bg image for a div which itself is height and width 100% (i.e. it covers the entire browser window).
This image gets cut off the bottom though. I have already tried things like background-size: cover; and height: 100%; width: 100%. Nothing seems to stop the bottom being cut off. I tried resizing the src image itself making it tiny and the bottom is still cut off?
HTML:
<div id="des" class="full-window">
</div>
CSS:
#des {
background: url("bg.png");
background-size: 100% 100%;
}
.full-window {
width: 100%;
height: 100%;
}
you are missing background properties to fit image without cutting.
try this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am trying to make a background image cover the whole screen width and height, and I can't seem to get it right with the height.
I am following these tips to achive it but I don't get it right. It just goes as high as the inner div content can go.
This is the html and css, you can see it in jsfiddle as well:
HTML:
<div class="navbar"></div>
<div class="background-container">
<div class="bg">
<div class="container">
JOIN US!
</div>
</div>
</div>
CSS:
.navbar {
height: 50px;
}
.container {
text-align: center;
padding: 10px;
color: #fff;
}
.bg {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Body tags are not full-height by default. You need to specify that.
html, body {
height: 100%;
}
Demo
To prevent the resulting scroll, remove margin and and padding as well.
Demo 2
If feasible please add position: absolute; width: 100%; height: 100% to your .bg class.
The problem is the .bg is just that container you see. If you want the background like you are describing change .bg to body and it works
body {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
//add this if you want it to stay fixed
background-attachment: fixed;
}
or you can make the .bg position absolute or fixed so it'll take 100% height.
The default html gets a margin so it will not stretch till the end, so add margin:0 and padding: 0, for stretching till the corners of the browser. Next the width:100vw; implies that 100% of your viewport width so as to make a responsive webdesign, similarly height:100vh; 100% of the viewport height
Add a CSS rule
body, html {
margin:0;
padding:0;
height:100vh;
width:100vw;
}
How i can modify #bg image so it would be responsive, resizable and proportional in all browser?
HTML:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">
</div>
<div class="col-md-2"></div>
</div>
</div>
css:
#import url('bootstrap.min.css');
body{
background: url('../img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 12%;
}
#bg{
background:url('../img/con_bg4.png') no-repeat center center;
height: 500px;
}
I found a solution.
background-size:100% auto;
You might also try:
background-size: cover;
There are some good articles to read about using this CSS3 property: Perfect Full Page Background Image by CSS-Tricks and CSS Background-Size by David Walsh.
PLEASE NOTE - This will not work with IE8-. However, it will work on most versions of Chrome, Firefox and Safari.
Try this (apply to a class you image is in (not img itself), e.g.
.myimage {
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
I had the similar issue and i solved it using:
background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;
...
here i had to add the padding: 50% because it wasn't working for me otherwise. It allowed me to set the height of container, as per the size ratio of my banner image. and it is also responsive in my case.
I believe this should also do the job too:
background-size: contain;
It specifies that the image should be resized to fit within the element without losing it's aspect ratio.
The way to do this is by using background-size so in your case:
background-size: 50% 50%;
or
You can set the width and the height of the elements to percentages as well
This should work
background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
Don't use fixed:
.myimage {
background:url(admin-user-bg.png) no-repeat top center;
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
Mby bootstrap img-responsive class is you looking for.