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% .
Related
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'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'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
Would you see the screen like below picture?
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
I think It's because you didn't declare 'height'.
Add 'height:100vh'style.
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
The reason for setting to 100vh is because the target is body tag.
If it's a different tag, use a different value.
Then this will be
And add 'margin:0px' style to remove the scroll.
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Then you can see
Thanks!
You can use cover
background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
http://jsfiddle.net/ou10gmfd/
Try this:
background-position: 50% 50%;
Or maybe you should try a space before the first center (could be an issue).
Most likely this is because your image is to large use background-size: cover; to cover the whole background of the body
remove DOCTYPE html from your page and it will work fine.
or use background-attachment: fixed;. then you do not have to remove DOCTYPE html
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo
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