I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port decreases.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port descreses.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
http://www.bootply.com/fiF4GI3g0n
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
max-width: 916px;
height: auto;
display: block;
}
<div class="special_box">
<div class="special_content"></div>
<div class="rodney">
<img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
</div>
<div class="special_arrow">
<img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
</div>
</div>
Responsive Design
Try this. With this code the arrow decreases size according to screen size. You can edit it as you like,
Use #media screen property to display content with respect to screen size
<html>
<head>
<style>
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
width:60%;
height: auto;
display: block;
}
#media screen and (max-width:1800px){
.special_arrow img {
width:98%;
height: auto;
display: block;
}
}
</style>
</head>
<body>
<div class="special_box">
<div class="special_content"> </div>
<div class="rodney"> <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
<div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>
I have figured out a way to do this making the Rooster and arrow images with filler transparent space from the top. Not sure this this the best way, but it works.
http://www.bootply.com/wfxTqAKJfo
CSS Code
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 440px;
width: 100%;
position: relative;
z-index: 1
}
.special_content {
margin: auto;
height: auto;
width: 100%;
top: 0;
position: relative;
}
.rodney {
background-image: url("http://beta.madrooster.com/images/special_rodney.png");
background-repeat: no-repeat;
background-size: 22% auto;
background-position: right 21% top;
height: 440px;
width: 100%;
position: relative;
z-index: 5
}
.special_arrow {
background-image: url("http://beta.madrooster.com/images/special_arrow.png");
background-repeat: no-repeat;
background-size: 64% auto;
background-position: left top;
height: 440px;
width: 100%;
position: relative;
z-index: 10
}
HTML Code
<div class="special_box">
<div class="special_content">
</div>
<div class="rodney">
<div class="special_arrow"> </div>
</div>
</div>
Related
I have been trying to position the image on top of the image, following StackOverflow question 27609816 (positioning the scalable image on top of another image), but cannot get css to work.
My second image displays inline to the right of the first image.
I'm assigning a class to the second image as follows -
.earth {
position: absolute;
top: 100;
left: 0;
height: auto;
width: 100%;
z-index: 1;
}
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
<div id="topDiv">
<img src="I/map.jpg" width="900" height="205" align="top"/>
<img class="earth" src="I/earth1.gif" align="top"/>
</div>
/*NORMAL STYLING*/
.main {
text-align: center;
}
.img-1 {
position: relative;
height: 400px;
width: 400px;
object-fit: cover;
}
.img-2 {
height: 300px;
width: 300px;
object-fit: cover;
/*css required to get image on top of img-1*/
position: absolute;
top: 0;
left: 50%;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="img-1">
<img src="https://images.unsplash.com/photo-1628160634750-a81a2a780805?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" class="img-2">
</div>
It's because you must apply position absolute to both of children. Ans this way you can align them. Don't forget that you should give z-index a higher number to the first image.
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
/* EDITED HERE */
.water {
position: absolute;
top: -10px;
z-index: 1
}
.earth {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
/* YOU CAN REMOVE Z-INDEX HERE
z-index: 1; */
}
<div id="topDiv">
<img class='water' src="https://picsum.photos/200/300" width="900" height="205">
<img class="earth" src="https://picsum.photos/100/300">
</div>
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
I have a list of screenshots. I want to display those inside a desktop-frame. I can achieve the effect easily with CSS but trying to make it responsive is giving me headaches.
My Html structure and style:
<style>
.container {
width: 80%;
margin: 0 auto;
}
.frame {
list-style-type: none;
background-image: url('http://www.hobbysubmarines.com/TV.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.frame li {
width: 100%;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
}
</style>
HTML:
<div class="container">
<ul class="frame">
<li><img class="screenshot" src="../img/screenshot1.jpg"></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/faj2rfc8/1/ so you maybe get the idea. If you see the fiddle, it is just to put the cat inside the tv-frame. Making this responsive is my main issue.
I would size the background in 100%, and add a media query to reduce the height of the screenshots for smaller screens. I put a fiddle together for you:
.container {
width: 80%;
margin: 0 auto;
}
.frame {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg');
background-size: 100%;
background-position: center;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
height: 100px;
}
// mobile only
#media screen and (max-width: 479px) {
.screenshot {
height: 40px;
}
}
fiddle: http://jsfiddle.net/gg89qwon/1/
The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.
html {
height: 100%;
width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
display: block;
position: relative;
width: 51vw;
margin: auto;
}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
display: block;
height: 53px;
margin: 0 auto;
position: relative;
width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
This is the problem
body {
width: 100%;
hight: 100%; <----- 'hight' make it 'height'
margin: 0;
padding: 0;
}
Replace with this
body {
width:100%;
height:100%;
margin: 0;
padding:0;
}
the ratio of your image will make it difficult i believe.
Since you started using vw units, maybe it's an hint to use vh units and max-width too.
Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :
DEMO of my idea
CSS updated :
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;/* UPDATED*/
margin: 0;
padding:0;
display:flex;/* UPDATED*/
}
.main {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 15vh;/* UPDATED*/
background-size: 100%;
width:100vh;/* UPDATED*/
margin:auto;/* UPDATED*/
max-width:100vw;/* UPDATED*/
overflow:hidden;/* UPDATED hide marquee*/
}
.container {
display: block;
height: 100%;/* useless when parent has no height given */
margin: 0 auto;
position: relative;
}
Simple question, but for the life of me I cant figure it out. There is space to the right of the image which is a link inside a div how do I get rid of the space to the left of the image?
Code:
<style>
div.home a {
float: left;
display: inline;
}
div.home p {
top: 5%;
right: 50%;
}
div.home {
top: 10%
position: absolute;
width: 1400px;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
div.home #h1 {
width: 700px;
height: 400px;
display: inline;
background-image: url('parallax.png');
background-size: 700px 400px;
}
div.home #h2 {
width: 700px;
height: 400px;
display: inline;
background-image: url('normal.png');
background-size: 700px 400px;
}
<div class="home">
<p>Which version would you like?</p>
</div>
I guess it's because you set #h1 and #h2 an inline display. So there's some white space, I guess.
Try adding white-space:nowrap; to those elements. Or simply let them as block element (default behavior).