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
Related
I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}
Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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 have a picture as my background but I can't figure out how to make my code responsive such that the image stays consistent when I decrease the browser window.Here is my code:
body {
margin-top: 50px;
}
.full {
background: url(../melissa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
If you want a responsive background look at this SAMPLE
.full {
height: 500px;
background-image: url('image.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will make it responsive for you.
Just add the height and width to 100%.
.full {
position: relative;
width: 100%;
height: 100%;
background: url(../melissa.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Actually, I'm assuming .full is a div which contains the background you want right? if that's the case, the width and height set to 100% will only make the div that big, which may still not work as he's using 100% to the height and thus you would need to set 100% to the body or any other container that .full is in. You can just set the background-size: cover, background-position:center center, backgorund-repeat:norepeat, and just give .full it's height and width. That should make the backgound always filling the whole container.
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