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
Related
I have tried everything and cannot figure out why I cannot get the background image to show up for this div.
**Here is the code:**
body {
margin: 0px;
padding: 0px;
}
#top {
background-image: url(../IMG/PINS.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<title>TEST BCKGRND IMAGE</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div id="top">
</div>
</body>
</html>
The file structure is set up like this: I have a main folder called TEST_SITE, inside of that folder I have a folder for my CSS and a folder for my images called IMG.
I cannot for the life of me figure out why the background image is not showing up.
If anyone can please give me a heads up as to what might be wrong, I would truly appreciate it.
Thanks.
setting the height of the #top div is important: if you set the width, and then the height to auto, then the background still won't show because there is nothing within the div to put a background to. However, if you force a height by setting one in the css, then the background will show.
The code you have given for your path is incorrect because the background-image expects only a path to an image (and nothing else), whereas what you have given is suited to the background.
See my fiddle
You need to set a height and width value from the #top and use the background-position:center center; background-repeat:no-repeat; like my answer: for example
#top{
width:500px;
height:500px;
background-image: url(YOUR IMAGE PATH);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or you can make it like this:
#top{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:url(YOUR IMAGE PATH) no-repeat fixed center;
width:500px;height:500px;
}
It is because your div is empty. If you add content to it then you will see the background. You can also set a height or add padding with CSS.
<div id="top">
<p>A large amount of text here</p>
</div>
or
#top{
height:400px;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or
#top{
padding: 25px 0;
background-image: url(yourimagehere);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a problem stretching a specific image to fit its parrent div.
On chrome/fire this works great.
On IE(I am using 11) this image does not stretch to its container.
I tried every example out there.
Please look at my code from plunker:
https://plnkr.co/edit/KHbgUXjDc349RpPgcWV9?p=preview
<div class="cls-1">
<div class="cls-2"></div>
<div class="lp__box-shadow icon-login_shadow"></div>
</div>
.icon-login_shadow {
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A0.2%3Bmix-blend-mode%3Ascreen%3Bfill%3Aurl%28%23linear-gradient%29%3B%7D%3C/style%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22251.59%22%20y1%3D%22193.59%22%20x2%3D%22251.59%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.14%22%20stop-color%3D%22%232f343b%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%220.52%22%20stop-color%3D%22%23337082%22%20stop-opacity%3D%220.41%22/%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23369fb9%22%20stop-opacity%3D%220.73%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b1cf%22%20stop-opacity%3D%220.85%22/%3E%3C/linearGradient%3E%3Csymbol%20id%3D%22login_box_mirror%22%20data-name%3D%22login%20box%20mirror%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Crect%20class%3D%22cls-1%22%20width%3D%22503.17%22%20height%3D%22193.59%22/%3E%3C/symbol%3E%3C/defs%3E%3Ctitle%3Elogin%20shadow%3C/title%3E%3Cg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%3E%3Cg%20id%3D%22login_2%22%20data-name%3D%22login%202%22%3E%3Cg%20id%3D%22Login_background_window_copy%22%20data-name%3D%22Login%20background%20window%20copy%22%3E%3Cuse%20width%3D%22503.17%22%20height%3D%22193.59%22%20xlink%3Ahref%3D%22%23login_box_mirror%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.lp__box-shadow {
margin-top: 0.5em;
height: 50px;
width:100%;
}
.cls-1{
width:50%;
}
.cls-2{
border: 1px solid red;
height:50px;
width:100%;
}
EDIT:
Who ever thinks its a duplicate, show it on the plunker, the "duplicate" not working in my case
use this:
background: url('url.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
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 am having trouble here. I got a background image that is 1024x960, and I want it to fit in all type of resolutions, but impressively, it is overextending a bit on all screens.
This is my CSS:
body {
background-image: url("../testes/jogo.bmp");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
I guess there has to be a mistake with the code, but yet every time I read it I feel it's ok but obviously it's not.
Try This :
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Frorm the docs:
Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
If you want the image to be fully in view, you can use
background-size:contain;
Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
body {
background-image: url("../testes/jogo.bmp") no-repeat center center fixed;
background-size:cover;
}
you can see here
Try This Code:
body {
background-image: url("http://miriadna.com/desctopwalls/images/max/Natural-dam.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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.