I want to create a background image that has two images, but I can’t complement the second image to the right.
I can’t manage to make it look like one whole picture, but in one place.
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.home-wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.left-content {
background: url(../img/leftwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content {
background: url(../img/rightwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
<div class="home-wrapper">
<div class="left-content">
a
</div>
<div class="right-content">
a
</div>
</div>
The reason I didn’t make it a whole background is these two have a different function when you hover over them.
This is what I want it to look like:
This is what I have instead:
You can achieve the desired result by adding background position in your css. Try this code.
.left-content{
background: url(../img/leftwing.png);
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content{
background: url(../img/rightwing.png);
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
Add background-position to both .right-content and .left-content
.right-content {
background-position: left center;
width: 50%; /* << this was 100%, typo? */
}
.left-content {
background-position: right center;
}
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 have location pins on top of background image.
but when its responsive pins location chages.
i want set pins at specific position of images
<div class="container">
<img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin1">
<img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin2">
</div>
css
body {
background: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg) no-repeat center center fixed;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
color: white;
font-family: 'Open Sans', 'Nunito', sans-serif;
}
.pin1 {
position: absolute;
width: 30px;
height: auto;
top: 10%;
left: 28%;
}
.pin2 {
position: absolute;
width: 30px;
height: auto;
top: 40%;
left: 50%;
}
i am trying to set position but its not working
Don't use a background image as it's not responsive in the same way as positioning. Use an actual inline image in a wrapper and position your pins on that.
Here's an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 8%;
height: 8%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 29%;
left: 36%;
}
.box:hover>.pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg/800px-Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
I want the about div to show up BELOW the
full screen home card
I'm having troubles getting it to show like it should.
my html code has both divs in the "right" order and when i look it up online, i couldn't find any solutions.
<body>
<div class="homeCard">
<div class="homeCardTitle">
<h1>Robin Riezebos</h1>
</div>
</div>
<div class="aboutCard">
<div class="aboutCardText">
<h2>About</h2>
</div>
</div>
</body>
my css is either missing something or I did something completely wrong but I can't seem to find out what it is so please help...
index.css
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
position: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: fixed;
width: 100%;
height: 320px;
top: 50%;
margin-top: -160px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
Please change your css like below, i think the problem was with position fixed, if you want to get your background image rendered fully please respective pixels of height.
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
width: 100%;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
I have found a solution by bugging around in my css.
Turns out in stead of position: fixed; I should have used background-attachment: fixed; and remove position all-together.
this is my own fixed code:
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
background-attachment: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: relative;
width: 100%;
height: 0px;
top: 50%;
margin-top: -90px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
width: 100%;
background-color: #1F1F1F;
color: white;
height: 320px;
float: left;
text-align: center;
}
this is my code, and as you can see body has some background image, and #cont should be white. But I want my div elements to be transparent in a way that I can see body background image. Any CSS tricks that can do that?
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
width: 100%;
background-image: url(image.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#cont {
margin: 0;
border: 0;
padding: 0;
background-color: white;
}
#cont div {
margin: 20px;
border: 1px solid gray;
padding: 0;
width: 50px;
height: 50px;
float: left;
}
<div id="cont">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
here is the snippet updated:
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
width: 100%;
background-image: url(https://placekitten.com/1000/1000);
background-position: center;
background-repeat: no-repeat;
background-size: cover; /*include this*/
background-attachment: fixed; /*include this*/
}
#cont {
margin: 0;
border: 0;
padding: 0;
background-color: white;
}
#cont div {
margin: 20px;
border: 1px solid gray;
padding: 0;
width: 50px;
height: 50px;
/*float: left; replaced by display inline-block*/
display: inline-block; /*include this*/
background: url(https://placekitten.com/1000/1000) center center no-repeat; /* <<< same body image*/
background-size: cover; /*include this*/
background-attachment: fixed; /*include this*/
}
Here is the full example: jsbin
You can add a background-image to your div elements and play with background-position to give the illusion of being transparent.
If you're using JavaScript you can get the x/y position of the element and dynamically adjust the css.
Check it:-
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#cont {
margin: 0;
border: 0;
padding: 0;
opacity: 0.3;
}
#cont div {
margin: 20px;
border: 1px solid gray;
padding: 0;
background-color: white;
width: 50px;
height: 50px;
float: left;
background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
background-attachment: fixed;
background-position: top center;
}
<div id="cont">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
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");
}