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;
}
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>
On some mobile devices the image on the top of the page is nog showing. The logo, on the other hand, is showing. The difference is an image and background-image. The one not showing up is the background-image.
The div has a height and width and a background color. So if the background-image isn't working, the color should be visible but it isn't.
The image is not showing on this specific phone with settings:
Nokia 8.1
Chrome 74.0.3729.157
Android 9
Here you can find print-screens
Nokia, so no picture:
Iphone, with picture:
I've changed the position of the class .background to relative instead of static. And deleter mix-blend-mode: multiply;
But nothing is working. The height of the image show, but it is just an empty space.
<div class="header">
<a class="logo" href="/">
<img src="/images/logo.png" alt="">
</a>
<div class="background">
<div class="mas"></div>
</div>
</div>
.header{
position: relative;
.logo{
color: black;
text-transform: uppercase;
font-weight: bold;
font-size: 3.5em;
letter-spacing: 5px;
text-decoration: none;
position: relative;
z-index: 100;
img{
width: 120px;
margin-bottom: 10px;
margin-left: -22px;
}
}
.background{
position: relative;
width: 100%;
height: 300px;
margin-top: 0;
background: $baseColor;
z-index: 50;
.mas{
width: 100%;
height: 300px;
margin-top: 40px;
bottom: 0;
top: auto;
position: absolute;
right: 0;
background-image: url(/images/antwerpse_fluisteraar.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.8;
}
}
}
Try this I hope it will help you
.background{
position: absolute;
width: 100%;
height: 300px;
margin-top: 0;
background: $baseColor;
.mas{
width: 100%;
height: 300px;
margin-top: 40px;
position: relative;
background-image: url(/images/antwerpse_fluisteraar.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.8;
}
}
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;
}
Note:
I've looked around at other threads, but I can't seem to get the answers there to work.
I've been trying to exclude "#menu" from the margin property in "body{}" so that it doesn't overlap the text.
My code:
body {
text-align: center;
background: black;
background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
font-family: Helvetica;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
color: black;
background-attachment: fixed;
background-size: cover;
font-size: 20px;
margin: 15%;
}
#menu{
position: absolute;
color: white;
position: fixed;
background-attachment: fixed;
border: 5px;
background-color: grey;
background-size: contain;
border-style: ridge;
border-color: grey;
width: 150px;
text-align: left;
float: left;
}
Override the CSS from the body with the CSS for the menu:
#menu { border: none; border-width: 5px; }
Add anything else you might need in there.
If you are trying to make the margin on #menu be reset to the default value, you can add margin: none; to your CSS, so that it looks something like this:
body {
text-align: center;
background: black;
background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
font-family: Helvetica;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
color: black;
background-attachment: fixed;
background-size: cover;
font-size: 20px;
margin: 15%;
}
#menu{
position: absolute;
color: white;
position: fixed;
background-attachment: fixed;
border: 5px;
background-color: grey;
background-size: contain;
border-style: ridge;
border-color: grey;
width: 150px;
text-align: left;
float: left;
margin: none;
}
That should do the trick!
probably it was what inside your #menu
#menu{
position:absolute; <-- this are interfering with your margins
color:white;
position:fixed; <-- this are interfering with your margins
float:left; <-- this are interfering with your margins
margin: none; <-- remove that and try set the margin here (eg: margin: 10px;)
}