This question already has answers here:
Stretch background image css?
(6 answers)
Closed 9 years ago.
the code below displays the image multiple time like into 10 different image, need it to be full image..
<HTML>
<BODY >
<style>
body {background-image:url('back1.jpg');}
</style>
</BODY>
</HTML>
Something like this has always worked for me.
body {
background: url(cool-image.jpg) no-repeat center center;
top:0;
left:0;
min-width:100%;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Try this...
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;
}
<HTML>
<BODY >
<style>
body {background-image:url('back1.jpg');background-repeat:no-repeat;} // add the no repeat
</style>
</BODY>
</HTML>
background-repeat: no-repeat;
background-size: cover;
Related
My website's background image keeps changing on page resize. I can't seem to figure out why it's doing this. Here's my code:
header {
background-image: url('../img/header-bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: white;
}
I just noticed this weird thing. So I have a master CSS document, and I'm overriding one section in it with a PHP variable that I include at the beginning of my index.php to dynamically change a background image based on whats in a folder on the server.
In typical CSS I have this:
.fullscreen{
background: url('./Hero_Image/image01.jpg') no-repeat center center;
}
And I have a nice, full-screen image background for the .fullscreen class section that is scaled appropriately for the browser window and scales as the window is resized.
However, when I try to make this dynamic, using php and overriding like so:
<?php
include '_SiteResources/php/loadHeroImage.php'; //<< note: output is basically an echo of the URL of the first file in a folder
?>
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
I'm noticing overriding using PHP isn't showing the same result. Yes, its also fullscreen, but I'm noticing it also doesn't scale as the window scales, like the original CSS implementation; it seems to display scaled up, and doesn't scale with the browser window.
Why is that?
Here's the code for loadHeroImage.php per request:
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') { //Skips over . and ..
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
echo './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
Ok, I managed to figure out my issue thanks to some hints from #jkon and #EduardoEscobar.
When overriding my CSS in the <head> tag, I thought I would only need to override the one command that I was changing, but it seems I needed to also include the rest of the other CSS commands.
In my CSS, my .fullscreen class looked like this:
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
and in my index.php <head> tag, I was overriding just the background URL with PHP like so:
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
But what I should have been doing was including all the other CSS code. This is what ended up getting the same result as just my CSS hardcoded URL:
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
height: 100%;
width: 100%;
background-color: #212121;
}
</style>
Thanks everyone for your feedback and help! I really appreciate it!
I know you found the answer to your problem but I just wanted to expand on my comment to your answer.
You should be able to override just the background-image. You just have to include the base css declaration and then override just the background-image in another declaration.
For example:
<head>
<style type="text/css">
/* Base css code */
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
/* Override the background image */
.fullscreen{
background: url('<?php getHeroImage(); ?>') no-repeat center center;
}
</style>
</head>
<?php include("asdkfasdf.php");?>
<head>
<style type="text/css">
.fullscreen{background: url('asdfasdf.jpg');}
</style>
</head>
<div class="fullscreen">asfdasdf</div>
</body>
<?php
if($imageCSS !== null || $imageCSS !== ''){
echo '<style type="text/css">
.fullscreen{background: url(\''.$imageCSS.'\');}
</style>';
}
?>
</html>
asadfasdf.php
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') {
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
$imageCSS = './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
i don't recommend having php on the bottom, but this works. You shouldn't be echoing out a whole page that space. include the page, and echo only the link.
I just finished designing by website and now I am trying to layout the entire body in one whole piece rather than tiles continually repeating itself. May I ask how would I do this?
I am not sure if i make sense, but like a wall paper that is stretching out rather then 30 little tiles repeating itself
this is my code
HTML and the CSS
*{
padding: 0px;
margin: 0px;
}
body {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw')
}
and the html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
</body>
You need to set background-size. There are two options:
Option 1) cover will remain proportional -- Demo http://jsfiddle.net/jUcL9/4/ (drag the handles between panes to change the width/height of the preview pane)
body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you don't want the background to remain at the top, you would use center center instead of center top -- Demo http://jsfiddle.net/jUcL9/
Option 2) 100% 100%; will distort to fit -- Demo http://jsfiddle.net/jUcL9/1/
body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
You need to specify the Background Size and make it not repeat.
Here are some css properties to add to the body:
background-size:100px 100px;
background-repeat:no-repeat;
You will need to adjust to the proper size.
try inserting this on your css file:
html {
background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm creating a button that changes the background but I kinda got stuck.
I got far enough that I have the main functionallity but the background is not fullscreen. I have no clue how to get it back to fullscreen.
<html <?php echo "STYLE='background: url(".$back.") no-repeat center center fixed; width: 100%;'";?> >
and some css in the html
html {
background: url(../pic/back2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale')";
}
Try to implement background-size property.
background-size:100% auto;
Background size is changed using attribute background-size so in your case you are changing HTML property width , not the background.
Try this..
<div id="background">
<img src="<?php echo $yourimage ;?>" class="stretch" alt="" />
</div>
then add this css
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -999; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Why don't you use Javascript?
Something like:
<html>
<head>
<script>
function background() {
document.getElementsByTagName('html').url == "http://www.newurl.com/";
};
</head>
<body>
<button onclick="background()"></button>
</body>
</html>
How can I have rotating background images that expand/contract if the browser window is expanded/contracted?
Does anyone know a script that does this? Or would there be a way with just CSS?
There's a jQuery plugin called SuperSized: http://buildinternet.com/project/supersized/ and the plugin handles all cross browser compatibility for you and will swap images at the time interval of your choosing if you want.
Or, the HTML5 way to do this (only supported in some browsers like Chrome): http://jsfiddle.net/jfriend00/vzYrf/
html {
background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or two more ways to do it yourself: Perfect Full Page Background Image.
it's simple :)
some css:
<style type="text/css">
html { height: 100%; overflow:hidden;}
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; }
</style>
you can play with these values ...
and body content:
<body bgcolor="#000300" style="margin:0px; width:100%">
<img id="background" src="background.jpg" alt="My Background" />
</body>
this is for 1 background, the rest you can do with javascript ...
<script type="text/javascript">
function changeBackground(){
var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg'];
var inRandom = Math.floor(Math.random() * backgrounds.length);
document.getElementById('background').src = backgrounds[inRandom];
setTimeout ( "changeBackground()", 10000 );
}
setTimeout ( "changeBackground()", 10000 );
</script>
I didn't test the script, but this is basically the idea ...