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>
Related
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% .
Within a div, I am trying to stretch a header image both horizontally (width) and vertically (height). Seems the width stretch can be solved by using:
background-size: cover;
background-size: 100% 100%\9; /* IE8 */
But for the height (vertical stretch), is there any way to do this? What is the best practice to do this, acceptable across browsers?
<div style="background-image: url("http://ibuild.ph/eascongress/sites/default/files/logos-banners/header-1-revised.png"); background-size: cover; height: 135px;">
<div style="float: left;"><img style="width: 441px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/EAS-Logo-Theme-Header-Banner.png" alt="EAS Congress 2015 logo"></div>
<div style="float: right; padding-right:17px"><img style="width: 513px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/Global-Local-Benefits-Theme-Header-Banner.png" alt=""></div>
</div>
Link to the demo/dev site here
You've already tried this?
.yourclass{
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}
Try to set with px, not with percentage and see if it makes some difference.
Obs.: The demo link is broken.
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;
}
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.