In Bootstrap, you can set the class of an to resize with the viewport:
<img src="..." class="img-responsive">
How can I utilize Bootstrap with CSS background images?
background: url(../images/MyImage.png) center center no-repeat;
Try adding this line to your css code.
background-size: cover;
you can try following css for full background:
img{
background: url(../images/MyImage.png) o-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I'm looking for so long to fix my issue with an full image background in wordpress and the image is awesome but is will not resize on browser and devices. Is there any css trick to do the job?
Here is my website http://www.social-boost.nl also the sign up form is important...... I hope somebody can help me out with this.
What about cover (CSS):
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Updated answer to overwrite interfering CSS rules:
html {
background: url(wp-content/uploads/2018/02/landingsbnew20182.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
I would like to have a full size background, for my hero unit. I used the following code:
HTML
<div class="hero">
<h1> hello world </h1>
</div>
CSS
.hero {
background:url(../images/header1.png) no-repeat center center;
background-size:cover;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
The problem with my solution: The background is only as high as my heading is. But the size should not depend on the content, it should depend on the viewers resolution.
Here is a perfect example: https://www.zirtual.com/ This hero-unit has also a fullscreen background-image. Thats the way, I would like to have it, too.
You have to set a 100% height for your body and html tag, and your .hero class.
Like this:
body, html {
height: 100%;
}
.hero {
height: 100%;
background: url("../images/header1.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JSFiddle Demo
make sure your html,body height and width is 100% .
I'm fresh out of school and working on a website that is already developed for the most part. The developer's were marketers and didn't know much about html, css and especially javascript. I'm building a custom page that will mimic a single-page website but I can't seem to make the background images resizble and scrollable. Here is the bit of html and css.
<article class="panel_kingdom">
<section>
<div class="panel" id="first"></div>
</section>
<section>
<div class="panel" id="second"></div>
</section>
</article>
CSS:
.panel {
z-index:50;
top:0;
left:0;
height: 100%; }
.panel_kingdom #first {
background: url(../img_wild/back30_2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
I can specify the position to be absolute or fixed and the image appears but it won't scroll. I can't seem to make the "panels" have a relative position and display without setting a specific pixel height. Any help would be appreciated.
Fiddle: http://jsfiddle.net/VGHLe/
What you need is:
background-size: 100% 100%;
instead of cover.
There is one thing you need to specify:
display:table
CSS
.panel {
position:relative;
top:0;
left:0;
height: 100%;
display:table;/*This was needed.*/
}
.panel_kingdom #first {
background: url(http://farm6.staticflickr.com/5532/11710736156_628ce8eba0_s.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel_kingdom #second {
background: url(http://tctechcrunch2011.files.wordpress.com/2012/09/om-nom.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Fiddle link
I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and the bottom of the browser screen is blank. Here is the css I have now:
body {
background-image: url('bilde.jpg');
background-repeat: no-repeat;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have tried this:
body {
background-image: url('bilde.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but it does not work either. Does anyone have an answer for this problem? Thanks.
I figured it out. The difference was that I should have been using
background: url('bilde.jpg') no-repeat center center fixed;
instead of
background-image: url('bilde.jpg') no-repeat center center fixed;
Pretty subtle but the change did the trick.
i'm having the following css code
.imgf{
background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
thats working as it should now i need to change the img with php so i'm trying to use inline css
<div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center"
style="background-size: cover"
style="-webkit-background-size: cover"
style="-moz-background-size: cover"
style="-o-background-size: cover"
class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>
only now is the background-size cover not working and not showing up in firebug
am i using the inline css wrong ?
Use this code, cleaner than #RAS version:
background: url(image.jpg) no-repeat center center / cover;
You need to use single style tag.
<div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;"
class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>