I needed to center my background image in the exact center of my screen but the current code I have has it such that the image truncated at its top. Here's the code I have so far:
body {
background-image: url(img/tooslow.gif);
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
min-height: 100%;
}
img {
position: absolute;
bottom: 15%;
left: 42.5%;
margin: auto;
width: 250px;
height: 250px;
<img src="img/too1.png">
try below updated snippet.
body {
background-image: url(img/tooslow.gif);
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
min-height: 100%;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -125px;
margin-left: -125px;
width: 250px;
height: 250px;
}
<img src="img/too1.png">
body {
background-image: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg);
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
min-height: 100%;
}
img {
position: relative;
bottom: 15%;
left: 42.5%;
margin: auto;
width: 250px;
height: 250px;
}
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">
change your image position to relative
Add below code to img
img {
position: absolute;
margin: auto;
width: 250px;
height: 250px;
top:0;
bottom:0;
left:0;
right:0;
}
Related
Here is the link to the example: https://imgur.com/a/sN2lwDK.
And the css for it:
.login-container {
position: fixed;
height: 100%;
width: 100%;
background: url("../../storage/assets/nave.jpeg") no-repeat center center fixed;
background-size: cover;
.login-form {
left: 0;
right: 0;
width: 520px;
max-width: 100%;
padding: 35px 35px 15px 35px;
margin: 305px auto;
background-color:white;
height: auto;
position: fixed;
border-radius: 4px;
}
}
When I am trying to zoom in, the image remain fixed, but the form keep going down is that the intended behavior?
I'm trying to display a full screen background with multiple div's on top of it. When I'm resizing the browser, the divs also have to move. I want the divs to resize as well, so that they will stay at the same spot of the background image.
I've found a great solution on Stackoverflow, but the image isn't a full screen background. I've tried to adjust it but it doesn't seems to work. Who can help me?
.div-bg {
height: 100vmin;
width: 100vmin;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
Just change .cities position from absolute to fixed...and instead of using vmin for width and height...use px or rem
.div-bg {
background-image: url('https://image.ibb.co/f1qio5/insights_indiamap.jpg');
height: 30rem;
width: 30rem;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
background-size: auto;
}
.cities {
position: fixed;
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
I am attempting to build a header across the top-center of the page with two names and a ring in between centered. I also have a picture centered in the middle of the page. Everything looks nice on a full screen laptop until I resize
the browser and everything moves and looks jumbled. I've read a lot of
post and everyone says use a wrapper with a min width and user percentages along with that in your divs. I can't figure this out after a week of reading any
and everything I possibly could.
HTML:
<body>
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
<div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
</body>
</html>
CSS:
.wrapper {
min-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.michael{
color:#EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
max-width: 100%;
max-height: 100%;
left: 30%;
top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{
position: fixed;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 4%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{
color:#EEE8AA;
position: fixed;
left: 70%;
top: 0%;
text-transform: uppercase;
font-size: 30px;
max-width:100%;
max-height: 100%;
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
It might be easier if you use position: relative; instead of position: absolute;
And you didn't close div class="Michael"> properly you forgot the / in the closing div-tag.
I didn't have the picture but came up with something that works down to 500px in screen width.
HTML:
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
CSS:
.wrapper {
width: 479px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%; */
display: block;
}
.michael {
color: #EEE8AA;
position: relative;
text-transform: uppercase;
font-size: 30px;
width: 200px;
float: left;
display: inline-block;
border: 1px solid black;
/* max-width: 100%; */
/* max-height: 100%; */
/* left: 30%; */
/* top: 0%; */
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead {
position: relative;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
border: 1px solid black;
display: inline-block;
/* left: 50%; */
/* top: 4%; */
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
border: 1px solid black;
/* top: 0%; */
text-transform: uppercase;
font-size: 30px;
/* max-width: 100%; */
/* max-height: 100%; */
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
Here is the link to a fiddle: https://fiddle.jshell.net/hzxsvLzz/1/
I have in my design a fixed head and sidebar and in the content area which is able to scroll I have a 3 column layout.
Now I want the 2 sidebars in my content area scrolling when there is enough content but then when its at bottom then the sidebars should be fixed and only the content in the middle should then scroll.
Here for a better understanding a high quality concept
.
Is this possible without JS and if yes how ?
Thanks for every help :)
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
overflow-y: scroll;
padding-bottom: 10px;
}
.one {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100px;
float: left;
padding-top: 10px;
background:green;
}
.three {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:orange;
}
.clear {
clear:both;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>
If you the remove padding from your three colomns, add a child div to each for padding, give them a height of 100%, an overflow-x of scroll and give content a fixed position, all 3 columns will have a height of 100% and scroll independently.
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
top: 0px;
left 0px;
position: fixed;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
height:100%;
max-height:100%;
min-height:100px;
}
.one {
width: 22%;
min-width: 150px;
float: left;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100%;
float: left;
background:green;
}
.three {
width: 22%;
min-width: 150px;
float: left;
background:orange;
}
.column {
height:100%;
max-height:100%;
min-height:100px;
overflow-x: scroll;
}
.column .inner {
padding-top: 10px;
}
.clear {
clear:both;
}
On my site, www.azletconsulting.com, when the site drops below 950px safari breaks the positioning of the Register to Vote, Join the Campaign etc menu positioning. At the larger sizes everything is aligned properly but as soon as it drops to one of the smaller css media queries the menu buttons break alignment. The code is the same between all the media queries and I have no issue in Chrome/Firefox.
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28 a {
left: -200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/rov.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-29 a {
top: -90px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/join.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-30 a {
top: -175px;
left: 200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/contribute.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden
}
Try this:
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28, li#menu-item-29, li#menu-item-30 {
display: inline-block;
}
li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 a {
display: inline-block;
width: 200px;
height: 80.5px;
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-28 a {
background-image: url("images/buttons/medium/rov.png");
}
li#menu-item-29 a {
background-image: url("images/buttons/medium/join.png");
}
li#menu-item-30 a {
background-image: url("images/buttons/medium/contribute.png");
}