I am working with a scalable background image using CSS. I am using a div tag container with a nested AP div that contains an animated flash logo that I want to be scaled down together with the background image.
I have two problems that I have been researching about all day and I can´t seem to fix:
when I scale down the browser to test the image, the AP div shifts position and does not stay in the exact spot where it is supposed to be. It moves a bit upward or downward depending on the browser.
I can´t get it to work in Internet Explorer.
I have read as many Q/A and visited many forums and am at the end of my wit. Any help will be GREATLY appreciated. Thanks!!!!!
The site test can be viewed at www.casadeoracionvida.org The behavior I want is that the logo is always over the white spot (the clouds), whether scaled or not and in any browser.
This is my entire code:
<head>
.imgwrapper {
height: 100%;
width: 100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(img/bluesky.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#logo {
position: absolute;
width: 23%;
height: 47%;
z-index: 1;
left: 40%;
top: 40%;
}
</head>
<body>
<div class="imgwrapper"> <div id="logo">
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" /> </div> </div>
</body>
</html>
it's difficult to fix your code without almost completely rewriting it as I believe it is Dreamweaver-generated.
Here's my take on it :
<style>
body
{
margin:0px;
background: url(img/bluesky.jpg) no-repeat center top;
background-size:100%;
background-size:cover;
}
#globalWrap
{
display: table;
width:100%;
height:100%;
}
#logoWrap
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#logo
{
width:23%;
display:inline-block;
}
</style>
<body>
<div id="globalWrap">
<div id="logoWrap">
<div id="logo">
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" />
</object>
</div>
</div>
</div>
</body>
Notes :
this is a bit of a hack, but it's known as one of the most reliable ways of centering an element both horizontally and vertically
I added a background-size:100%; - this makes the background stretch in old browsers where cover isn't available
I'd put the display:table on the body to avoid adding two wrapper divs, but I'm a bit wary of changing the body's display type
Related
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>California Road Trip</h1>
<h2>Driving the Coast of California</h2>
</header>
<p>
Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
<br />
<b>Call for help now!</b>
</p>
<p>
<video controls="controls" autoplay height="300" width="500" loop>
<source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
</video>
</p>
<div>
<img src="columbus-nav-850x637.jpg" alt="Background Image" />
</div>
<footer>
Copyright © 2016.
</footer>
</body>
</html>
CSS:
header{
color: #000;
text-align: center;
border: 500px;
background-color: rgba(255, 190, 0, .5);
border-radius: 20px;
}
p{
text-align: left;
margin-left: 20px;
font-family: sans-serif, Arial, 'Myriad Pro';
}
div{
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
}
footer{
position: fixed;
bottom: 10px;
margin-left: 10px;
}
The background image is not taking up the entire screen. Any help is appreciated.
Here is a JSfiddle
You must set div img rather than just div. Give the element a height and width of 100% and it should cover the viewport.
div img {
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
height: 100%;
width: 100%
}
Background image is a css property, but you're trying to apply it to an image tag. You'll want to do something like this:
HTML:
<div class="myBackground"></div>
CSS:
.myBackground{
background-image: url(columbus-nav-850x637.jpg);
background-size: cover;
/*You can make this background fixed on desktop by adding this:*/
background-attachment: fixed;
}
Add these properties to div section in css file
{
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
The image you wish to serve as background for your page is placed in a div smaller than your page's size. And hence even if the image filled the div, it won't fill the page.
One of the possible solutions is to apply background image directly on body as suggested by Richard.
However, if you want your image to be in a separate div, you will first need to make the div cover your entire page. Minor update to CSS properties should do it.
div{
position: fixed;
top: 20px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: .5;
background-size: cover;
}
Next thing you need to make the image cover the entire div. You can either do it by setting
width: 100%;
height: 100%;
on img tag, or removing the img tag altogether and adding
background-image: url("columbus-nav-850x637.jpg");
in css for the div itself. You might also need to set proper z-index on your "background" div to layer it behind other contents of the page.
Сheck the "background-attachment" parameter. It should not have the value "fixed"!
Hey guys I'm trying to get an image to stick to the bottom of my website. I can get it to stick to the bottom but then it stretches... This is my code:
<style>
img {
position: fixed;
bottom: 0;
}
</style>
<img src="fire.jpg" width="100%" height="100%" />
Instead of nicely sticking to the bottom of my webpage and changing dimensions as the webpage changes it's size, it just stretches around. All other Stack Overflow tips just do the same. Any help is appreciated.
I think what you're after is this:
<style>
.background-img {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
background-image: url(/images/fire.jpg);
background-size: cover; /* or "contain" */
background-position: center bottom;
}
</style>
<body>
<div class="background-img"></div>
<div class="content">
...
</div>
</body>
It's difficult to make an image do what you're asking for without distortion or unwanted vertical height issues.
Try this!
div {
background: #F3F3F4 url("http://2.bp.blogspot.com/-CC6No3LtfEY/T6PQLbfzNBI/AAAAAAAAMhI/E7mlV7hya4M/s1600/google.jpg") no-repeat bottom;
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
position: fixed;
}
<div></div>
If you skip width and height the image will use its default size and stick to the bottom.
First of all remove the width and height properties of your img tag. Then add to your img css max-width: 100% that will make your image responsive, and adapt to the screen size.
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
I am designing an intro page. I place a background and video piece on that page and also I want to get the view of desktop in mobile also. i tried the following code:
css:
.trailer-content {
max-width: 75%;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: fixed;
bottom:40px !important;
width: 50%;
height: 50%;
margin-left: auto !important;
margin-right: auto !important;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
html :
<div id="background">
<img src="img/bg.jpg" class="stretch" alt="" />
</div>
<div class="trailer-content">
<div class="video-container"><iframe width="420" height="315" src="//www.youtube.com/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Output result
the background appears stretched
the video is normal in desktop but in mobile view, the video is also stretched to some size.
Responsive background image:
html {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See demo
Responsive video:
HTML:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
See demo
And again I must notice never use ID for styling
To resolve your case properly
Easiest way is to use #media rule w3school link
In that case you'll have any number of diffirent rules that applies to the same class but in diffirent situations.
That way is much better than just stretch video or backgrounds, because you'll have full control of all elements. They'll behave as you want them to behave at diffirent devices.
remove height:100% from #background... so the image will stretch 100% in width, but keep the right dimensions.
However, I think is better you put it as a background in the body like this:
body{background:url(img/bg.jpg);
background-repeat:no-repeat;
background-size:100% auto;}
For the video frame tags that holds videos, remeoving the height might scale the video properly as well.
You can also set specific width, height etc by using meidatypes, see more information about responsive webdesign (RWD) here http://www.hongkiat.com/blog/responsive-web-tutorials/
I'm currently having some problems displaying divs with 100% height in IE, it works fine in every other browser, it's just IE that is giving me some trouble and I'm not sure how to resolve it.
Here's some of my code:
HTML:
<div id="content">
<div id="box-01" class="slide" style="color: #F26964; background-color: #003218;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-02" class="slide" style="color: #F2F1EF; background-color: #70858E;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-03" class="slide" style="color: #F2F1EF; background-color: #003218">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
</div>
CSS:
html, body {
margin:0;
padding:0;
height:100%;
border:none
}
#content {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
.slide {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
display: table;
vertical-align: middle;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text-content {
text-align: center;
display: table-cell;
vertical-align: middle;
text-transform: uppercase;
}
So I have a set of relatively positioned divs, each one fitting to the browser window size, like I say this all works fine in every browser except IE, in particular the 100% height style attribute not being recognised.
After doing a little bit of research I found that this may have something to do with the text being in a table (which is necessary as I want to centre the text horizontally and vertically) but I've not got a clue how this issue can be resolved, any suggestions would be greatly appreciated!
There are a number of strategies discussed here:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
This appears to work in IE FF & Chrome:
http://codepen.io/anon/pen/asqpL