I am new still a beginner to CSS and I have been having problems with getting my background to fill the age. I know contain and cover won't help me but even things like background-size and the widthand height commands aren't helping.
body {
background-image:url(X.png);
background-repeat:no-repeat;
width:100%;
height:100%;
}
Use html instead of body. cover should work, but it may depend on the browser as to how it act's for instance you may need to use -moz-background-size:cover if the browser is mozilla based.
Try add these style below:
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
It should work, please check my jsfiddle link:
http://jsfiddle.net/chris_poetfarmer/9xa35pwp/
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 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 have a div with background image and i set background-size:cover to make full width and height background image. but its not working in ios devices how can i set it for ios devices please help me
thanks
It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification1..
body {
background-image: url(#);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
1. Browser Support
edit - Updated Fiddle
I had a similar problem. I got my solution by setting a scroll attribute for background. Also be sure to set the parent container to 100% height and width. AdrianS has the right point for aiming at html to set 100% height and 100% width.
In the following code, I have a header class for the background image. Adapt it as you need.
Check out a fiddle at http://jsfiddle.net/Bavc_Am/7L3gD/5/
Upvote if helpful please, I'm new here.
html,
body {
height: 100%;
width: 100%;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background: url(http://placehold.it/800x800.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background: url(http://placehold.it/800x800.png) no-repeat center center scroll;
}
}
User mkubilayk posted the solution the really worked for me here. The lifesaver whas the property below:
background-attachment: scroll;
Quoting:
I have had a similar issue recently and realised that it's not due to
background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting
background-attachment property to scroll.
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
} }
The solution I will provide can be seen here. But with a minor change. This method is tested many times and for IE it has IE8+ support. You can see the full browser support in the link that I provided.
html {
width: 100%;
height: 100%;
}
body {
background: #Fallback-color;
background: url(../images/image.jpg) center top no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
height: 100%;
}
So I have a wrapper div with a background image that covers the whole page.
This works generally... I can maximize the browser and the background covers completely, BUT if there is a scroll, the image stops at the point of scroll.
This image shows the scrolling and the gap from the jsFiddle example/1 :
#wrapper
{
background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100%;
}
and the inner div
#inner
{
margin: 0 auto;
height: 100%;
width: 980px;
}
Any advice would be helpful.
thanks
I have recently done something that might do what you're looking to do-
Anything's worth a shot, right?
background: #000 url(**snip**) no-repeat 50% 0 fixed !important;
Try adding the !important to the end of your css, it "over-rides" any other styling from other classes, ect. You never know, it might work - but it might also break something else.
What !important does can be found here.
The problem seems to be the fixed width on .inner
.inner{
//...
width:980px;//this appears to be breaking the css3 background-size
}
A possible solution is to apply min-width on the .wrapper
#wrapper {
background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100%;
min-width:980px;
}
This however means that your cute cat will be enormous on tiny screens (but as you have applied fixed width on .inner this might not matter)
see fiddle
Although it wasn't the route I wanted to take... by setting the image and all of its parameters in body rather than a div, I can get the behavior I am looking for.
I don't know why that is exactly... somehow body is treated different than a div (though I do have a reset script, so I would not expect that to be the case)...
I have a 1024*768px image that I want to use as a background for a webpage.
I also want this background to cover the background of the entire window, even when it's resized. And.... I wan't the image to stretch least as possible!
I've tried the examples here, except the jquery one - since I'd like it better if only done in css.
thank you!
edit: here's the link: http://css-tricks.com/perfect-full-page-background-image/
You could try the backstretch plugin
It is a one line javascript solution, just include it (also jquery) in your headers and call it as the example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
</script>
Official page:
http://srobbin.com/jquery-plugins/backstretch/
Github source:
https://github.com/srobbin/jquery-backstretch
I think some good old CSS can come in handy on things like this. This works well on desktop browsers and my iPhone/iPad:
html {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: hidden;
}
body {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: auto;
}