I would like to replace and change my css background-image to video, does someone know how to make it ?
Any way to change the image to uploaded video src? Without breaking the split left and right.
The images was path under css. with .side-left {background-image: url('left.jpg');} i did try to change the source left.jpg to myvideo.mp4 but it seems doesnt work.
my html
<body>
<div class="container">
<div id="splitlayout" class="splitlayout">
<div class="intro">
<header class="codropsheader clearfix">
<!--
<span>Rex Photography<span class="bp-icon bp-icon-about" data-content="Photography is the science, art, application and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically ..."></span></span>
-->
<img class="headerlogo" src="logo2.jpg" title="PixPodium" alt="PixPodium"/>
<!--
<nav>
<a href="project.html" class="bp-icon bp-icon-prev" data-info="Go to Projects" ><span>Go to Commercials</span></a>
<span>Go to Weddings</span>
<!--
<span>back to the Codrops article</span>
-->
<!--
<span>Contact Us</span>
<!--
</nav>
-->
<div class="demos">
Commercials
Weddings
Contact Us
</div>
</header>
<div class="topWrapper" style ="display:none;">
<div class="side side-left" >
<div class="intro-content">
<!--
<div class="profile"><img src="img/profile1.jpg" alt="profile1"></div>
-->
<h1 ><span></span><span>Commercials</span></h1>
</div>
<div class="overlay"></div>
</div>
</div>
<div class= "bottomWrapper" style = "display:none;">
<div class="side side-right" >
<div class="intro-content">
<!-- Original Code Start
<h1 style="background-color:rgba(0, 0, 0, 0.5);"><span >Weddings</span><span>Weddings</span></h1>
Original Code End -->
<h1><span></span><span>Weddings</span></h1>
</div>
<div class="overlay"></div>
</div>
</div>
</div><!-- /intro -->
</div><!-- /splitlayout -->
</div><!-- /container -->
</body>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".topWrapper").fadeIn(1000);
$(".bottomWrapper").fadeIn(1000);
//$(".topWrapper").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
</script>
</html>
my css
html, body,
.container {
position: relative;
width: 100%;
height: 100%;
}
body {
overflow-y: scroll;
/*
background: #fff;
*/
background: #fff;
}
.splitlayout {
position: relative;
overflow-x: hidden;
min-height: 100%;
width: 100%;
}
/* Intro sides */
.side {
position: fixed;
/*top: 0; */
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
.open-left .side,
.open-right .side {
cursor: default;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 499;
visibility: hidden;
width: 100%;
height: 100%;
opacity: 0;
}
.side-left .overlay {
background: rgba(0,0,0,0.7);
}
.side-right .overlay {
background: rgba(0,0,0,0.3);
}
.side-left {
/* Original code Start
left: 0;
background: #47a3da;
color: #fff;
outline: 1px solid #47a3da; /* avoid gap
Original Code End */
left: 0;
float: left;
background-image: url('left.jpg');
/* <------ */
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
/*background: #47a3da;*/
color: #fff;
/*outline: 1px solid #47a3da; /* avoid gap */
}
.side-right {
/* Original code Start
right: 0;
background: #fff;
color: #47a3da;
/*outline: 1px solid #fff; /* avoid gap */
right: 0;
background-image: url('right.jpg');
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
color: #fff;
}
You can do it using video tag in html:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
Any alternate text.
</video>
And in css:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
This will help you to learn and implement the feature that you need.
Make the video a static or absolute div within the body.
Set it to width and height 100%.
Position the content over it.
See this example:
https://jsfiddle.net/zrjqctov/7/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#videobackground {
width: 100%;
height: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#videobackground iFrame {
width: 100%;
height: 100%;
}
#container {
height: 100%;
width: 100%;
font-family: sans-serif;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#container > div {
background-color: rgba(255,255,255,0.5);
}
<div id="videobackground">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ztc6_elMg60" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="container">
<div>
<h1>
Content here
</h1>
</div>
<div class="demos">
Commercials
Weddings
Contact Us
</div>
</div>
Related
I am attempting to adapt code from this site: Video Header snippet
This places a video header and it overrides my entire page and content with itself (the video header).
I would like to resize the header so that it has a width of 100% (across the whole page) and a height of x (decided by me) e.g. 200.
I've tried various things to change both the overlay size and the video but nothing has worked.
<h1>My Website</h1>
<p>Website text here</p>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
The whole of the css used is below. Note, this is used in the same style sheet as bootstrap css has been implemented.
header {
position: relative;
background-color: black;
height: 15vh;
min-height: 15rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 40%;
width: auto;
height: 40%;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
As you can see I have adapted the code from its original (see link above). For instance I have changed this value from 100% to 40%. It works in that it changes the overlay size.
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
What I cannot figure out however is how to get the video also part of the overlay and sized correctly AND for the rest of my existing content not to be hidden from view/overwritten.
For some reason, once I add this content, I cannot scroll down through my site.
If I understand your question :) ,
I think setting the height and min-height to 200px for the header fix the issue like :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
see below snippet :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p class="mb-0">
Created by Start Bootstrap
</p>
</div>
</div>
</div>
</section>
Try deleting all the z-index you have in your CSS and then add z-index: -1; on the media query inside the header, like this:
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
z-index: -1;
}
header video {
display: none;
}
}
Section 2 is going behind my video background. Resizing the browser messes everything up.
I really don't know CSS, so?
HTML:
<body>
<script src="Assets/main.js" type="text/javascript"></script>
<!-- The video -->
<video autoplay muted id="myVideo">
<source src="Images/banner.mp4" type="video/mp4">
</video>
<div class="content">
<h1>
<a href=""
class="typewrite"
data-period="1800"
data-type='["hi", "I'm james", "I am creative", "I enjoy designing stuff", ""]'>
<span class="wrap"></span>
</a>
</h1>
"*"
</div>
<div>
<h2 id="section2"> Section 2 <br> jb <br> jb <br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb</h2>
</div>
</body>
I have it so some text types out a few small sentences over a video.
CSS:
body {
background-color: black;
text-align: center;
color: #FFF;
/* padding-top: 10em; */
}
* {
color: #FFF;
text-decoration: none;
font-family: 'CustomFont';
font-weight: 80;
font-size: 80px;
}
#slide {
background-color: red;
padding: 0;
position: absolute;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
/* Add some content at the bottom of the video/page */
.content {
overflow: hidden;
position: absolute;
font-size: 800;
font-family: 'CustomFont';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #F1F1F1;
width: 100%;
padding: 0px;
}
The video tag is on top of other elements by default, and you can send it to back by:
#myVideo {
z-index: -1;
}
body {
background-color: black;
text-align: center;
color: #fff;
/* padding-top: 10em; */
}
* {
color: #fff;
text-decoration: none;
font-family: 'CustomFont';
font-weight: 80;
font-size: 80px;
}
#slide {
background-color: red;
padding: 0;
position: absolute;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
/* Add some content at the bottom of the video/page */
.content {
overflow: hidden;
position: absolute;
font-size: 800;
font-family: 'CustomFont';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f1f1f1;
width: 100%;
padding: 0px;
}
#myVideo {
z-index: -1;
}
<script src="Assets/main.js" type="text/javascript"></script>
<!-- The video -->
<video autoplay muted id="myVideo">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="content">
<h1>
<a href="" class="typewrite" data-period="1800" data-type='[ "Hi", "I'm james", "I am creative", "I enjoy designing stuff", "" ]'>
<span class="wrap"></span>
</a>
</h1>
"*"
</div>
<div>
<h2 id="section2"> Section 2 <br> jb <br> jb <br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb<br> jb</h2>
</div>
You can also see it here.
I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.
You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>
You can check out how to add a video Tutorial
Edit: Edited fiddle
var $vid = $('video','#container');
var $msg = $('#custom-message');
$msg.css({
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});
video {
position: relative;
z-index: -1;
}
#custom-message {
position: absolute;
color: rgb(230, 200, 200);
z-index: 1;
}
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div id="container" align="center">
<video width="640" height="320" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
<div id="custom-message">
Need a Network?</div>
<div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
</div>
</div>
</div>
</div>
</div>
</section>
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);
im having this issue.. keep in mind i'm no expert in CSS i just did my best i could to make a website for my company.
The problem is when i resize the site or view it on XAMPP with ipad its all overlaped!
i want it to stop moving and show scroll bars like normal site would not overlap content!
however when its full screen its fine its on my 1920x1080 monitor.
my CSS:
#charset "utf-8";
/* CSS Document */
body
{
height: 900px;
padding: 0;
margin: 0;
background-image: url(Images/bkg.jpg);
}
.header
{
position: absolute;
width: 100%;
height: 100px;
top: 0;
background-image: url(Images/header.jpg);
border-bottom: #CCC 2px solid;
box-shadow: 0px 0px 25px #F00;
}
.logo
{
position: absolute;
top: 70px;
left: 50%;
margin-left: -203px;
}
#dog
{
position: absolute;
right: 0px;
width: 244;
height: 500;
top: 15%;
}
.buttonholder
{
Width: 600px;
height: 150px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -230px;
color: #FFF;
font-size: 18px;
}
#textholder
{
position: absolute;
left: 100px;
top: 35%;
font-size: 36px;
color: #FFF;
font-family: 'Tangerine', cursive;
width: 650px;
height: 300px;
}
#galleryholder
{
width: 460px;
height: 284px;
position: fixed;
left: 50%;
margin-left: -230px;
top: 50%;
margin-top: -145px;
border: #CCC 1px solid;
-moz-box-shadow: 0 0 25px 8px #000;
-webkit-box-shadow: 0 0 25px 8px#000;
box-shadow: 0 0 25px 8px #000;
overflow: auto;
}
/* gallery */
#s3slider
{
width: 500px;
/* important to be same as image width */
height: 300px;
/* important to be same as image height */
position: relative;
/* important */
overflow: hidden;
/* important */
margin-left: -40px;
margin-top: -16px;
}
#s3sliderContent
{
width: 500px;
/* important to be same as image width or wider */
position: absolute;
/* important */
top: 0;
/* important */
margin-left: 0;
/* important */;
}
.s3sliderImage
{
float: left;
/* important */
position: relative;
/* important */
display: none;
/* important */;
}
.s3sliderImage span
{
position: absolute;
/* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 474px;
background-color: #000;
filter: alpha(opacity=70);
/* here you can set the opacity of box with text */
-moz-opacity: 0.7;
/* here you can set the opacity of box with text */
-khtml-opacity: 0.7;
/* here you can set the opacity of box with text */
opacity: 0.7;
/* here you can set the opacity of box with text */
color: #fff;
display: none;
/* important */
top: 0;
/*
if you put top: 0; -> the box with text will be shown
at the top of the image
if you put bottom: 0; -> the box with text will be shown
at the bottom of the image
*/;
}
.clear
{
clear: both;
}
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Benčić Tartufi</title>
</head>
<body>
<div class="buttonholder">
<p style="float:left; margin-right:15px;">Kontakt / Contact</p>
<p style="float:left; margin-right:15px;">O nama / About Us</p>
<p>Proizvodi / Products</p>
<img src="Images/Separator.png" width="600px" height="77" style="margin-left:-70px; position:relative; bottom:30px;;" />
</div>
<div id="dog">
<img src="Images/dog.png" />
</div>
<div class="header">
</div>
<div class="logo">
<img src="Images/logo.png" />
</div>
<div id="textholder">
<p>"Iz Motovunske šume na Vaš stol, <br />
najbolji okus prirode, Tartuf."
</p>
<p>"From the Motovun woods to Your table,<br />
best taste of nature, the Truffle."
</p>
<img src="Images/Separator.png" width="550px" height="77px" style="position:relative; bottom:30px; margin-left:-75px;" />
</div>
<div id="galleryholder">
<!-- GALERIJA! DODAVAT SLIKE U IMG SRC SA SPANOM! -->
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Slike tartufa/1.jpg">
<span>Hello Truffles</span>
</li>
<li class="s3sliderImage">
<img src="Slike tartufa/2.jpg">
<span>Hello Truffles</span>
</li>
<!--Kopiraj si za novu sliku!! -->
<li class="s3sliderImage">
<img src="#">
<span>Hello Truffles</span>
</li>
<!--End-->
<div class="clear s3sliderImage"></div>
</ul>
</div>
<!--KRAJ GALERIJE!-->
<!--gallery holder div close-->
</div>
<!--end!-->
<script>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3600
});
});
</script>
</body>
</html>
For what i see here you are mixing % and px in your widths and heights when you use % it will make the design fluid according the the width of the browser so remove all % and replace them with px. also I would recommend wrapping the your code in a
<div class="wrap">
.wrap{
marging: 0 auto;
width: 960px;
}
It is very hard for us to help you with this code, since we cant view the images you are using. if you upload it to a website then it would be a lot easier.