In my web I have some divs. The first and the top one is my menu bar and below that one I have another div. The second div contain photo change and below him a div with some text. When I running my code the photos(which locate in the second div) cover all the divs (although the menu bar position is "fixed"). I think that the problem is somewhere in the css file. can someone help me?
Here is my code:
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>אודות</li>
<li>עבודות</li>
<li>פרוייקטים</li>
<li>חיפויי קירות</li>
<li>צרו קשר</li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
<p>1</p>
</div>
<div id="main_photo2" class="phocont">
<p>2</p>
</div>
<div id="main_photo3" class="phocont">
<p>3</p>
</div>
<div id="main_photo4" class="phocont">
<p>4</p>
</div>
<div id="main_photo5" class="phocont">
<p>5</p>
</div>
here is my css code:
#main_pics {
width: 100%;
height: 100%;
position:relative;
}
.phocont {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
text-align:center;
}
.phocont p {
margin-top:30%;
font-size:60pt;
color:#fff;
text-shadow: 0 0 2px #000;
}
.first {
z-index:9999;
}
#image{
overflow: hidden;
background-size: cover;
background-position: center;
}
#main_photo1{
width: 100%;
height: 100%;
background-image: url("1.jpg");
background-position: center center;
background-size: cover;
}
#main_photo2{
width: 100%;
height: 500px;
background-image: url("2.jpg");
background-position: center center;
background-size: cover;
}
#main_photo3{
width: 100%;
height: 500px;
background-image: url("3.jpg");
background-position: center center;
background-size: cover;
}
.container{
width: 100%;
height: 500px;
background-color: white;
}
jsFIDDLE
Try this JSFIDDLE as an example. You need to specify a height for your fixed header and give it the property top:0 in order to keep it fixed at the top. this will also remove the fixed element from the flow of your page so you will have to give your photo div a top margin to position it below the header. I'm not sure about the text you have after the photos as you did not provide the information needed.
EDIT
After reviewing your recent comment you should change main_pics to this:
#main_pics {
width: 100%;
height: 500px;
position:relative;
margin-top:55px;
z-index:1;
}
and also add z-index:2; to #nav_bar
Related
All the images that are not background images are not becoming responsive!
Tried max-width, images like the logo, mouse cursor are noot responsive
<header class=" bg-img bg-image-full">
<img class = "img-fluid"src="h_img.jpg">
</header>
<div class="container-fluid">
<img class="logo" src="logo.png" >
</div>
<div class="hero-text">
<br>
<h1 style="font-size:49px">WELCOME</h1>
<h2>TO DELANI STUDIOS</h2>
<h5>Amazing people are making amazing designs</h5>
</div>
<div>
<img class="mouse" src="mouse_click.png">
</div>
This is the css
.bg-img {
background-image: url("hero.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 500px;
max-width: 100%;
}
.logo {
position: relative;
margin-top: -2100px;
margin-left: 630px;
max-width: 5%;
height: auto !important;
}
.mouse {
position: relative;
margin-top: -1200px;
margin-left: 670px;
max-width: 100%;
height: auto !important;
}
Images to be responsive
Check object-fit property for images: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit. However, note that it's not supported by some older browsers.
Try using:
img {
max-width: 100%;
height: auto;
}
This question already has answers here:
How to make background image fit correctly inside a board without losing responsiveness
(3 answers)
Closed 4 years ago.
I have code in which there is class box, i have given backgroundimage to class box box1.
My problem is that the image is not correctly fitting inside to the board. When i resize the window it is moving upwards. How to
correct it?
How to make the image fit correctly inside the board without losing responsiveness without extract the board element from the main background and use it as an element alone?
which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>
Add position: relative; to #container and to .container2 (parent) if you set position:absolute to child
See fiddle
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
position: relative;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30vw;
position: relative;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>
I've got a div background-img, on top of that a gradient layer (don't wonder about the animation css, this is just a part of my website, but thats not causing any problems i think) . Now i want to have on top of everything my little navbar. Sadly it seems to not work and i can't figure out how to go.. there's always either the pic-background or the gradient on top of it, z-index gets completely ignored on a tag.
HTML:
.welcome-area{
position:relative;
margin: 0;
width: 100%;
height: 700px;
text-align: center;
overflow:hidden;
position: relative;
z-index: 45;
}
.pic_background{
top: 0;
left: 0;
position:absolute;
z-index: 1;
width: 100%;
height: 700px;
background-color: grey;
background-size: cover;
background-position: 0 -150px;
background-repeat: no-repeat;
}
.main-header{
display: block;
text-align: center;
width: 100%;
height: 100px;
color: white;
background-color: transparent;
position:absolute;
z-index: 7;
}
.gradient_background{
width: 100%;
height: 700px;
top: 0;
background-image: linear-gradient(to bottom right, #002c72 , #0058e6);
animation-name: gradient-background;
animation-duration: 4s;
animation-fill-mode: both;
position: absolute;
z-index: 2;
}
.main-header a{
}
<div class="welcome-area">
<div class=" pic_background">
<header>
<div class="main-header">
<nav>
about me
</nav>
</div>
</header>
</div>
</div>
<div class="gradient_background"></div>
https://jsfiddle.net/ft6y3guq/17/
The problem is that I want to trim the content B scrolling in content A and when it scrolls down again, it should reappear.
So it should be the area invisible, which is pushed into content A. I suspect i will need javascript here or is this synonymous with css alone?
body {
background-image: url('https://placeimg.com/1000/1000/nature/grayscale');
background-repeat: no-repeat;
background-attachment: fixed;
}
div { padding:10px; }
.fixed {
position: fixed;
top: 100px;
left: 50px;
border: 1px solid red;
height:100px;
width:400px;
z-index: 10;
}
.content {
background:#fff;
width:400px;
height:1200px;
margin-top: 220px;
margin-left: 50px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="fixed">
Content A
</div>
<div class="content">
Content B
</div>
Thank you very much for helping!
Rufnex
I have a structure where there are only images like below for desktop view and mobile view with a fixed height respectively in both views.
In mobile view images come out stretched.
I have applied a couple of solutions where images get cropped either from top, bottom, left and right and in my case i don't want.
How should i proceed so that images do not stretch in any view?
Assuming you want a fixed layout (as in your image), you can use background-image/background-size and set it like this
background: url(...) no-repeat; /* the shorthand property */
background-size: cover;
background-position: center center;
The cover value make the image always fill the element without stretching it and with background-position you can control whether an image should be centered, left, right, bottom, top aligned
div {
height: 200px;
width: 500px;
background: url(http://lorempixel.com/300/400/animals/4) no-repeat;
background-size: cover;
background-position: center center;
border: 1px solid black;
}
div ~ div {
height: 200px;
width: 200px;
}
div ~ div ~ div {
height: 500px;
width: 200px;
background-position: left center;
}
<div></div>
<div></div>
<div></div>
If you don't want to crop, you can use background-size: contain instead.
div {
height: 200px;
width: 500px;
background: url(http://lorempixel.com/300/400/animals/4) no-repeat;
background-size: contain;
background-position: left bottom;
border: 1px solid black;
}
div ~ div {
height: 200px;
width: 200px;
}
div ~ div ~ div {
height: 500px;
width: 200px;
}
<div></div>
<div></div>
<div></div>
Update based on comment, using percent height (relative to the body) on an img
html, body {
margin: 0;
height: 100%;
}
img {
height: 40%;
width: auto;
}
<img src="http://lorempixel.com/200/400/animals/4" alt="">
<img src="http://lorempixel.com/300/300/animals/4" alt="">
<img src="http://lorempixel.com/400/200/animals/4" alt="">