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.
Related
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
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%
}
CSS:
body {
background: url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg");
background-size: cover;
background-repeat: no-repeat;
}
JSFIDDLE: https://jsfiddle.net/rts05xt2/
I want that the image to be full width and full height, and if someone resizes the browser, the image will not resize again, just stay like that. Any suggestions?
You can apply the below CSS :
body {background:url("https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg") no-repeat center center fixed; background-size : cover}
html {
background: url(images/ho.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is the perfect way
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.
I have no idea why my background image is not showing. I can't see the image in dev tools and I'm stumped. It's in the folder and pointing to the right folder. Any help is appreciated! Here is my code:
html:
<body>
<div class="l-head-backImage"></div>
<div class="container">
<header>
<h1>This is the Header</h1>
</header>
</div><!-- container -->
css:
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You are telling it to cover the div; however, the div has no actual size because it has no content in. Therefore, you need to specify a width and height of the div so the image actually has something to cover.
Example with your code and a random dog picture: JS Fiddle
CSS
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
width: 300px;
}