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.
Related
I have the following code at https://jsfiddle.net/ncrcfduz, and a background image at https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. I need to make the background image rescale to fit in the div, preferred to show most of the "centered" content in the image. The following code only show the top-left corner of the image.
.container {
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 150px;
width: 300px;
}
<div class="container">
</div>
You're looking for background-size: contain (see the MDN entry), not cover. To get your example to work, you'll have to drop the background-attachment: fixed. Use background-position: center to center the background in your div.
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px;
width: 300px;
}
<div class="container">
</div>
Notes:
These days you almost certainly don't need the browser prefixes, meaning you can just use background-size: contain. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility
If you're using Autoprefixer (included in many build tools and build setups) it will automatically add any necessary prefixed versions for you, meaning you could do background-size: contain even if current versions of the major browsers still required prefixes.
You can include size in the background shorthand property with the syntax background: <background-position>/<background-size>. That would look like
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;
height: 150px;
width: 300px;
}
you should use:
.container{
background-size: 100%;
}
You just have to replace "fixed" by "center" on your "background" instruction.
Like that:
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
JSFiddle here: https://jsfiddle.net/ncrcfduz/2/
.container{
background-size: contain;
}
I solved this way. You can set your code like this:
<div style="background-image: url('your_url') ;background-size: 100% 100%; "> <div>
This trick should work but it will not keep the image aspect ratio by default.
background-size: 100% 100%;
I'm trying to have my billboard image approximately 2200px 965px fix inside of an div expanding the width of the screen and 500px in height, without losing any parts of the image. Is this possible, I have problem completing this task.
<div class="billboard"> </div>
css:
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
display:block;
width:100%;
Yes, simply add width: 1140px to your CSS code to make sure that it doesn't get chopped off at all.
If this is what you want, background image not getting chopped off, but generating an ugly output.
Note : The image I used has exactly the same dimensions as you provided (2200px by 965px)
.billboard {
height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: 100% 500px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 500px;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG);
width: 100%;
display: block;
}
<div class="billboard">ABV</div>
Here if the snippet is not working: JSfiddle
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'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>