I am using bootstrap and am trying to make my background images responsive, but its just not working! Here is my code...
html
<div class="row">
<div class="bg">
<img src="../img/home_bg.jpg" alt="home background image">
</div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Please help me! Thank you!
You need to read up a bit more about the difference between background images and inline images. You cannot style an img tag as a background, it is a block level element, and flows with the document. A background image is a property of an element. Since you want this image to be the background of the whole page, you can apply the background image to the html or body elements.
http://jsfiddle.net/8L9Ty/3/
body {
background: url('http://placekitten.com/900/900');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am trying from so long, and finally I found that in bootstrap 3.3.5 you have to use the height and width property to set the background.
I used the following code:
.header{
background-image: url(images/header.png);
height: 500px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Since you don't mention background image for your "DIV" tag. I assume you want to apply background image for your whole page. Is this what you looking for ?
Stylesheet
body {
background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
}
HTML Part
<body>
<div class="row">
<div class="bg">
</div><!-- /.bg -->
</div><!-- /.row -->
</body>
http://jsfiddle.net/AziziMusa/8L9Ty/5/
remove the img tag <img src="../img/home_bg.jpg" alt="home background image"> and do it with css as below :
html
<div class="row">
<div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-image: url('../img/home_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body, html {
height: 100%;
margin: 0;
}
.bg {
/* Full height */
height: 100%;
/* The image used */
background-image: url("https://picsum.photos/id/1/200/300");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="container-fluid bg" >
</div>
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
Hello I've done this: http://inventors.000webhostapp.com
and the thing is I'd like to make each background image fit the entire screen.
For that matter I searched and found this:
html {
background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
that made 1 of the pictures fit all the screen but my problem comes when I want to add a second one.
What I did is create
.p1 {
background: url(1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.p2{
background: url(2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
</body>
</html>
That makes the background images just tiny (the height of hello)
Here comes the question:
Is there any way to make those 2 images fit all the screen one after the other?
So I would see all the first image when I open the WebPage and when I scroll all the way to the bottom I would see entirely the second image?
Obviously I plan to put more than 2 background images for my portfolio but this is a good way, I think, to start with!
You have to set the size for your container. You can set the viewport size for the container with 100vh (height) and 100vw (width). See the following example:
html, body {
padding:0;
margin:0;
}
.p1 p, .p2 p {
display:inline-block;
}
.p1 {
background: url(http://placehold.it/100x100) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
.p2{
background: url(http://placehold.it/101x101) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
As noted by Axnyff in the comments background-size:cover only affects the way the background fills the containing element. In order to make these elements fill the screen you can use the vh viewport height unit.
body, p {
margin: 0;
}
.p1, .p2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.p1 {
background-image: url(http://lorempixel.com/400/200/nature/1/);
}
.p2{
background-image: url(http://lorempixel.com/400/200/nature/2/);
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
Edit:
One vh unit is equal to 1% of the viewport height hence the use of 100vh in my example to fill the viewport.
I am building a simple landing page where the visitor would see a banner, a background image below it and a couple of buttons located vertically beneath each other.
The problem I am experiencing is that, at the moment, both the banner and the background image are starting from the same position (the top left corner of the web page), thus part of the background is hidden by the banner.
The code I currently have is:
<style>
body {
background: url("http://url.to/background") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
}
#Wrap {
position: absolute;
}
</style>
<body>
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
</body>
The expected result is to have the banner image take the beginning of the page while fitting into the screen without causing any extra scroll to appear. What is more important is to have the background start after the banner.
A fiddle could be found at the following URL:
https://jsfiddle.net/morL1zka/
Any help or ideas would be appreciated.
you should use background-position-y for this, and you need to set value which is equal to the height of the banner
body {
background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
background-position-y: 100px;/*the value must be the same height as the banner */
}
#Wrap {
position: absolute;
}
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
You can easyli solve this using JavaScript. The Backgroundposition will be automatically set under the banner, without knowing the height of it.
var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');
body.style.backgroundPositionY = banner.offsetHeight + 'px';
body {
background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
#Wrap {
background-color: #345370;
text-align:center;
}
<body id="body-margin">
<div id="Wrap">
<img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
</div>
</body>
Here is also your updated fiddle: https://jsfiddle.net/morL1zka/2/
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;
}
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.