I have a webpage with a image placed onto it. the webpage the image is placed onto is a very long vertical page (4000px) for silly idea reasons.
The image I am placing is of a robot charging out of a city backdrop and I can hover over it and it fades into view. I've been testing out different browsers etc and the Firefox Mobile/Tablet scale view etc and it brought to my attention a few issues.
I've stabilized every other image in the webpage but 1. the robot: for some reason it just will not stay in one place when it resizes. When I Shift the Width scale of a window, the robot shrinks (as wanted) But also scales up or down from its original position.
I've been trying to suss it and no matter what solution, the robot will not stay in the same place and resize. It will always move up or down away from its original position due to resizing. I also cannot have the image at 100% as it's then far too large for the picture.
And because of it being a 4000px vertical screen, no matter how I resize the original image it will always stretch to suit the 4000px.
So I'm a bit stuck. Here is a little code to see if anybody can adjust this so the robot fits.
<style type="text/css">
.container{
width:100%;
hieght:100%;
top:0%;
left:0%;
margin: 0;
padding: 0;
text-decoration: none;
};
</style>
<style type="text/css">
.bakimg{
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<style type= "text/css">
#rob{
position:absolute;
top:40%;
left:54.5%;
width:45%;
height: 45%;
};
</style>
<style type= "text/css">
.robofade {
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;
-webkit-transition: opacity 3s;
}
.robofade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 3s;
}
</style>
<script type="text/javascript" src="sound-mouseover.js"></script>
</head>
<body>
<Div class="container">
<img class="bakimg" src="webapp1b2.png";>
<img id="rob" class="robofade" src="robot1a.png";>
<embed src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">
<img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">
<img id="txt" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">
<!---<img name="slidetext1" class="fadeout" src="menuslide1.png" style="position:absolute; top:100%; left:26%; width:60%; hieght:100%;">--->
</div>
<!-- <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%; z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
I am assuming that the issue is due to the large vertical image (4000px) throwing the size differential out of sync...
I can diagonally shift the window size and the image stays put in the correct position, but because of the large vertical backdrop. When i resize the width only of the image - i get the out of position issue... Thanks for any advice in advance.
http://jsfiddle.net/MgcDU/7239/
like this fiddle , but with a image that has to be at 40% size on a 4000px background image...Tricky . the 40% image just will not stay put... and i cant go 100% or the image is too big....
I sorted it, for those in the same position, it really is an easy fix... see code...
<!----responsive elements (images on images---->
<style>
.wrapper{
display: inline-block;
position:relative;
}
.bg {
width: 100%;
max-width: 100%;
}
.simg{
position:absolute;
right: 15.3%;
top: 3.5%;
height:16%;
width: 40%;
max-width:65%;
opacity: 0.1
}
.slidetxt1{
position:absolute;
right: 20%;
top: 28%;
width: 60%;
max-width:60%;
opacity: 0.1
}
</style>
</head>
<body>
<div class="wrapper";>
<img class="bg" src="webapp1b2.png";>
<img id="slide" class="simg" src="robot1.png"; onmouseover="enlarge2()"; onmouseout="delarge2()";>
<img id="simg" class="slidetxt1" src="menuslide1.png" onmouseover="enlarge()"; onmouseout="delarge()";>
<div>
<!--------------------->
<embed src="menulista.html" style="position:fixed; top:0%;left:8.0%; width:100%; height:10%; z-index:100000;">
<img id="bakbar" src="backbar.png" style="position:fixed; top:0%; left:0%;width:100%; hieght:100%; z-index:9999;">
<img id="txt" class="spinx" src="linkmywebsitelogotext.png" style="position:fixed; top:1%; left:5%; width:90%; hieght:90%; z-index:9999;">
<!-- <img name="glowtxt" class="fadeout" src="glowtext.png" style="position:fixed; left:0.05%; top:90%; z-index:99999;">-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
Related
I'm building a simple website right now and faced a small issue. How do I align picture (iMessage text with blue bubble) in the center of the screen so and place a text in the bottom left corner of the image (text is Read + time)?
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<head>
<div>
<img src="myimage.jpg"></img>
</div>
</head>
But how do I add text in the bottom left corner right below the image?
Something like this might work for you...
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<div class="centered">
<img src="myimage.jpg"></img>
<p>tester</p>
</div>
</head>
Although I completely agree with Temani, there are lots of resources on centring such as the links below:
css3 pr align-self
how to css image center
css align
Do you want to set your image in the center of screen Or in the center of a div?
If you want to set it in the center of screen horizontally then you shoud set
margin-left:auto;
margin-right:auto;
And if you want add text on image, you shoud set that image in the background of a div and add text in that div wherever you want
.imgdiv{ background: url(your IMG url) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px; width: 300px;
}
.imgtxt{
left:0; bottom:0;
}
<div class="imgdiv" >
<span class="imgtxt">Your text</span>
</div>
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"!
I'm fairly new to web design and I've been working on a pure CSS layered parallax page, like a landscape effect with overlapping div containers stacked at different depths... and to my pleasure I got it working perfectly in Chrome.
However when I load it in Firefox (ver. 47) (using Windows 10) it looks fine until I scroll down. My divs and their content completely disappear after various points and reappear when I scroll back up. Alternatively I can resize the browser and everything reloads perfectly, but will disappear again if I continue scrolling.
In IE and Edge the content disappears after completely scrolling off the top and doesn't appear when I scroll back up. Only reappears after resizing.
I have tried adding the browser specific prefixes and what not and that didn't help at all. I also tried changing the perspective value as noted in a similar post but that didn't fix it either. What is causing this discrepancy between the presentation in chrome and the others?
Here is my code, I have replaced the div background images with colors.
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="../CSS/Styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<img id="bannerlogo" src="http://placehold.it/350x65">
<div id="back1">
<p id="text1">Splash Text 1</p>
</div>
<div id="back2">
<p id="text2">Splash Text 2</p>
</div>
<div id="back3"></div>
<div id="back4"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
CSS:
html {
height: 100%;
overflow:hidden;
}
body {
text-align:center;
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-y: visible;
overflow-x: hidden;
background-image: url(../IMAGES/Layer1.jpg);
background-size: cover;
background-attachment:fixed;
}
#text1, #text2{
position:relative;
font-weight:normal;
font-family:courier new;
}
#bannerlogo{
width:75%;
max-width:700px;
}
#text1{
left:-10%;
top:60%;
font-size:4vw;
}
#text2{
left:-5%;
top:60%;
font-size:4vw;
}
#content{
position:relative;
height:700px;
width:100vw;
background-color:rgb(3,0,20);
z-index:10;
}
#footer{
position:relative;
height:150px;
width:100vw;
background-color:rgb(30,30,50);
z-index:15;
}
#back1, #back2, #back3, #back4{
position:relative;
right:0px;
background-size:cover;
width:100vw;
height:100vh;
min-width:1280px;
min-height:720px;
background-size: 100% 100%;
text-align:center;
font-family:verdana;
font-size: 200%;
color:white;
font-weight:bold;
letter-spacing:5px;
line-height:100%;
transform-style:inherit;
min-height:100vh;
}
#back1{
background-color:rgb(100,100,150);
transform: translateZ(-5px) scale(6) translateY(0%);
z-index:-1;
margin-bottom:-30vh;
}
#back2{
background-color:rgba(100,150,100,.7);
transform: translateZ(-2px) scale(3.5);
}
#back3{
background-color:rgba(150,100,100,.5);
transform: translateZ(-1px) scale(2) translateY(-25%);
}
#back4{
min-height:0px;
height:30vh;
background-color:rgb(3,0,20);
transform: translateZ(-1px) scale(2) translateY(20%);
margin-bottom:-30vh;
}
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
I'm doing a simple website.
In this website I have several divs in different layers (one in front of the other and so on).
With the two divs in the back there's no problem, but with the divs in the front when I resize the browser they move and I don't want that.
The weird part is that the back divs are created in the same way.
So basically what's messing my page around are: #icone_esquerda and #icone_direita.
Below is my code:
<style type="text/css">
#fundo{
background-image:url("tileable_wood_texture_copy.png");
background-repeat:repeat;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
#frente{
background-image:url("luinguica.png");
background-repeat:no-repeat;
background-position:top center;
position:fixed;
width:inherit;
height:inherit;
left: 0;
top: 0;
z-index:50;
}
#icone_esquerda{
background-image: url("botao_facebook.png");
background-position: bottom center;
background-repeat: no-repeat;
height: 50px;
left: 45%;
margin: -25px 0 0 -25px;
position: fixed;
top: 45%;
width: 50px;
z-index: 60;
}
#icone_direita{
background-image: url("botao_mail.png");
background-position: bottom center;
background-repeat: no-repeat;
position: fixed;
width: 50px;
height: 50px;
left: 53%;
top: 45%;
margin: -25px 0 0 -25px;
z-index: 60;
}
</style>
</head>
<body>
<div id="fundo">
<div id="frente">
<a href="http://www.facebook.com/confrariadaempada">
<div id="icone_esquerda">
</div>
</a>
<a href="mailto:info#confrariadaempada.pt">
<div id="icone_direita">
</div>
</a>
</div>
</div>
</body>
When I resize the browser the divs with the ids icone_esquerda and icone_direita move!!
Can anyone help me please?
Thanks in advance.
Fixed is supposed to keep it in the specified area based on screen - where it is, what size it is, etc.
Absolute makes it stay put, no matter where or what size.
Really, both of them should rarely (if ever) be used. It's better to learn to use Relative positioned elements with floats as needed (cleared properly, of course).