I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
add this to the css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for.
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>
Related
my background on my div is not loading properly on iphone when using safari or chrome.it is completely responsive in Mozilla however in safari and chrome it still loads as a 100%width and 100%height.
it is the background image of the "sect" div.
this is my html
<div class="sect">
<H1>ALESH</h1>
<h2>This is me</h2>
<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>
</div>
this is my css for pc
html, body {
height: 100%;
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sect {
height: 100%;
width: 100%;
background-position: absolute;
background: url("homepage/photos/b1.jpg") no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 0;
left: 0;
Right: 0;
margin: auto;
top: -2px;
overflow: hidden;
}
I do have a separe css file for "max device width: 480px".
however nothing works do you please know where could be a mistake ?
add this tag in the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I had something similar:
the background image was not beeing displayed correctly on Safari & Safari mobile.
The problem is about
background-attachment: fixed
This is a bit tricky for mobile browsers.
For me I just had to leave that out.
Sometimes event the positioning is not available. So try without.
Maybe helpful for you:
Fixed background on iOS
Hope that helps.
Additional:
Also found this on Stack about that issue.
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 learn html and css. Right now I'm trying to make a background image fill the browser window no matter the size.
I've googled it 100 times and every page pretty much says the same thing. So I copied the code and it isn't working for me. When I set my browser to a smaller size, the background image repeats itself. Which I don't want I just want it to fill the window.
Here's my css.
html {
background-image:url(background.jpg);
background-size: 100%;
background-image: no-repeat-y; }
Before I did 100%, I tried using cover instead and that didn't work either. The image is fullscreen when the window is maximized but when I resize it the image will repeat.
Using background-size cover will do the job:
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
To scale, the CSS you want to scale needs to be inside a container itself, namely BODY inside the HTML container; try this:
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image:url(background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat-y;
}
You need to specify a height of 100% to the parent div <body> so that any child div with a height: 100%; will take the height of it's parent div. Here's an example:
Wrap your content in a parent div like this:
<html>
<body>
<div class="wrapMeTight">
....Your page content....
</div>
</body>
</html>
And add this to your css:
html, body {
height: 100%;
}
.wrapMeTight {
min-height: 100%;
height: 100%;
background-image: url (/img.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Use this:
<html>
<head>
<style type="text/css">
body { background-image: url("background.jpg"); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; width: 100vh; }
</style>
</head>
<body>
</body>
</html>
Hey,
I would like to get a whole image, in the width of the browser, as my header.
But the thing is, i get a horizontal scroll bar, and I don't want that.
What I want is that the image adjust if the browser also adjust.
Is this possible with css?
Sorry for my bad english.
This is my code
#header {
Margin-left:auto;
Margin-right:auto;
heigth:400px;
position: center center;
min-width: 100%;
max-width: 1024;
}
<body>
<div id="header">
<img src="header.png" />
</div>
You could chose to set your image as background image and use background-size: cover; like this:
#header {
width: 100%; height 400px;
margin: 0 auto;
background: url("../header.png");
background-size: cover;
}
<div id="header"></div>
You can find more explanation about background-size here:
http://www.css3.info/preview/background-size/
Try.
#header {
max-width: 100%;
background:#ffffff url("header.png") repeat-x;
}
You may be looking for a background cover:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Using the cover method will scale the images to fill the container.
You can set #header img { max-width: 100%; }
Hmm, if i do a background-image, the image itself does not show up. Maybe beacause its 1400px in width, can css crop this for each diffrent width of the browser witout any horizontal scrolling bar.
http://jsfiddle.net/FUqhb/
I need to move the player so that it always stays below the cd cover.
I can't change the html (I can add things but I can't change the order or delete stuff inside) and I can't set a fixed margin-top for the player. Other than that, any ideas?
I tried display:block but it doesn't work, probably because it's an absolute positioned div.
jsFiddle: http://jsfiddle.net/FUqhb/11/
You can add a div with height:200px which will push the bar down.
<div class="audio_player">
<div style="height:200px"></div>
<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=somefile.mp3" height="27" width="207"/>
</div>
Turn off absolute positioning of the sleeve:
.turntable {
width: 100%;
height: 200px; /* cd height */
position: relative;
}
.artwork,
.gloss,
.sleeve {
width: 100%;
height: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.gloss {
background: url('http://i.imgur.com/JrVdR.png');
position:absolute;
top:0;left:0
}
.sleeve {
background: url('http://i.imgur.com/VjVh1.jpg') no-repeat;
width: 200px; /* cd width */
}