I have read so many tutorials about make flash as background of a header, but there are several code involved on there. Can you explain to me how to make flash as background?
The single most important element involved in making flash media a background (i.e. being able to place stuff ontop of it) is to ensure that when embedding, you're setting the wmode to opaque or transparent. Failing to do so will mean that no matter what, the media will render ontop of the other elements on the page.
Other than that, you just need to use CSS to place content over the media via position: absolute; and possibly allocating a higher value for z-index.
You have to create two div's that are exactly on the same place. Then you put your flash content in div 1 and your content you want "on top" in div 2.
<div id="holder">
<div id="flash_header_background">FLASH HERE</div>
<div id="header_foreground">CONTENT HERE</div>
</div>
Then you style your div's with CSS to they are on top of each other.
#holder {
height: 250px; /* Flash height */
width: 800px; /* Flash width */
position: relative;
}
#flash_header_background {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
}
#header_foreground {
z-index: 2; /* Puts this div above the background DIV */
position: relative;
height: 100%;
width: 100%;
}
IMPORTANT: Remember to set the wmode of your flash content to opaque or transparent. - Thank you strah for reminding
Related
I need to make a page without scrolling in landscape version.
The height of the page to be 100%.
I've tried everything.
In Safari, I always get to scroll the lower region.
And I get a hidden area.
I can not hide the bottom bar.
And I can not reduce the height. I can not make it smaller than 320.
The browser creates an additional white area at the bottom of the page.
(Also, i can't use JS)
I will be grateful to anyone reply.
P.S. In the screenshots is not my site, only to show an effect
There are a few ways you can accomplish this. First, you may be able to simply use a table that fills the entire viewport so that each element is then spaced evenly when switching orientations. You could also solve this using simple CSS so you will have more control and have the ability to take advantage of media queries.
See this working fiddle
First you want to wrap all of your content in a single parent container that fills the entire view. This will prevent content from existing outside of the view.
HTML
<div class="wrapper">
<div class="menu">
The Menu
</div>
<div class="hero">
The Hero
</div>
<div class="head">
Text
</div>
<div class="content">
This is content.
</div>
</div>
CSS
.wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
From here you can then set each element to take up a certain percentage of the parent container so that rescaling recalculates the elements proportions instead of forcing a scroll.
.menu, .hero, .head, .content {
position: absolute;
left: 0;
width: 100%;
}
.menu {
top: 0;
height: 10%;
background: #eee;
}
.hero {
top: 10%;
height: 20%;
background: #aee;
}
.head {
top: 30%;
height: 10%;
background: #eae;
}
.content {
top: 40%;
height: 60%;
background: #eea;
}
Implementing it this way will allow you to have a bit more control of the behavior of each element as the view size changes.
Example to best describe question:
I have an image, lets call it background (blue in example). In this example the image is
2000px wide / 1000px high
has width: 100% set and will rescale with the browser window.
I also have another image, let's call it green. It's a square which is
200px x 200px (width is 10% of the size of the background).
What I want to achieve is that I want green to rescale and reposition accordingly and fully cover the pink target position of the background, regardless of current viewport width (in other words: it should be "responsive").
The rescaling part is easy, as it's just to set the width to 10%. The positioning is a harder nut to crack. The following code is as far as I get. As I'm using position: absolute I'm removing the element from it's natural flow and top: 40% will be 40% of 0 and the green square will stay at the top.
Same example code is available as a CodePen for easier editing: http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#
Is this simply not possible with pure CSS? If not, one possible workaround could be to use the image element of a svg.
.wrapper {
position: relative;
}
.bg {
position: absolute;
width: 100%;
}
.green {
position: absolute;
width: 10%;
left: 60%;
top: 40%; /* This isn't working */
}
<div class="wrapper">
<img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png">
<img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png">
</div>
(I had a hard time finding a suitable title for this question. Feel free to edit it)
Explanation: http://www.w3schools.com/css/css_positioning.asp
CSS:
.bg {
position: relative;
width: 100%;
}
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}
I have been researching how I could apply a user agent stylesheet to a div.
Is this possible?
Specifically, I want to apply the user agent stylesheet of input to a div within one of my web applications.
I don't believe that there is a way to make one element inherit the styles of another easily. You could try to loop over an input's computedStyle and apply it to a div, but that may do more than you want (i.e. it will probably pick up its size and shape as well). It also isn't particularly elegant:
https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle
One thing you might do is to put an input absolutely positions inside the div, and set it to the div's full height and width, so it stretches over it. Then disable it but set the background color to white. Or, put another div over the top of it to prevent clicks on it and take it out of the tab order:
JSFiddle: http://jsfiddle.net/p040gdos/
HTML
<div id="container">
<input id="backgroundInput" tabindex="-1" />
<div id="cover">content goes here</div>
</div>
CSS
#container {
height: 100px;
width: 100px;
position: relative;
}
#backgroundInput {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
#cover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
Alright.. I'm struggling with this one..
I've got an image with a transparent "hole" cut in it, and I place a video behind it. However, when the video is there, the image becomes sort of.. de-saturated.
Here is the CSS
.header {
position: relative;
}
.header img{
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
.header video{
position: absolute;
width: 168px;
left: 553px;
top: 109px;
z-index: 1;
}
And the markup
<div class="span12 header"><img src="img/screenshot-final.png"/><video src="img/video/video-final.mp4"></video></div>
I'm not sure why the video would effect the image since its dimensions are fit to the hole in the image. However, setting display:none on the video "fixes" the image.
Im pretty sure this is unavoidable, have you thought about placing the image ontop of the video to fit the hole with an appropriate z-index. Not ideal but I think the de-saturation is standard for a video overlaying an image!
EDIT: try putting you video in a div tag and the putting your image inside a div tag inside that div! then use absolute positioning to rectify the positioning! this should sort you out
EDIT:
<div class="span12 header">
<video src="img/video/video-final.mp4"></video>
<div id="image">
<img src="img/screenshot-final.png"/>
</div>
</div>