I´ve been trying to display the child div over the parent div but it keeps it pushing down. i´d like to have the background picture with a banner on top of it with some text inside the banner.
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("images/background1.jpg");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
.contact-header{
width: auto;
height: 70px;
background-color: #c1c1c1;
line-height: 70px;
}
Try to add
position: absolute; top:0;
to the .contact-header class
.contact-wrapper{
width: auto;
height: 400px;
border: 3px solid #ff0000;
margin-top: 5px;
}
.contact-background{
background-image: url("http://via.placeholder.com/350x350");
width: auto;
height: 400px;
object-fit: contain;
vertical-align: top;
opacity: 0.7;
position: relative;
z-index: 1;
}
.contact-header{
width: 100%;
height: 70px;
background-color: #c1c1c1;
position: absolute;
top:0;
z-index: 2;
}
<div class="contact-wrapper">
<div class="contact-background"></div>
<div class="contact-header">
<h1>Contact Us</h1>
</div>
</div>
Related
I want to show an background-image while hovering over the normal image. They both should have the same height and width. I thought to make it work by giving the div with the background image display: inline-block so it takes the same size as the image, but that makes it so the width: 100% and height: 100% of the image stop working cause they try to take 100% of the width from the inline-block element.
How can I make the background-image the same size as the image while keeping the values of height and width as ..% of the .box div.
.box{
width: 500px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.around-image{
background: url(http://via.placeholder.com/600x400) no-repeat center;
background-size: cover;
display: inline-block;
}
img{
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
opacity: 1;
vertical-align: middle;
}
.helper{
display: inline-block;
height: 100%;
vertical-align: middle;
}
img:hover{
opacity: 0;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>
Edit
Thanks to the answer from #dbigpot I probably got a better solution which is changing the background-image on hover. Only problem is that I can't use the max-height and max-width on the image and I need that part of the code so my images always look good inside of the div.
Is there anyway to set max-height or max-width on a background-image?
.box{
margin: 30px;
width: 400px;
height: 200px;
border: 1px solid black;
text-align: center;
background: url(http://via.placeholder.com/300x200) no-repeat center;
background-size: cover;
position: relative;
}
.box:hover{
background: url(http://via.placeholder.com/200x300) no-repeat center;
}
.height p{
position: absolute;
left: -60px;
top: 45%;
-webkit-transform: rotate(-90deg);
}
.width p{
position: absolute;
left: 40%;
top: -40px;
-webkit-transform: rotate(0);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</span>
<div class="width">
<p>width: 400px</p>
</span>
</div>
As you see, the 300x200 image is stretched over an area of 400x200. I don't want the image to stretch.
To prevent stretching of the image just change the value of the background-size property to contain:
.box {
background-size: contain;
}
.box {
margin: 30px;
width: 400px;
height: 200px;
border: 1px solid;
text-align: center;
background: url(http://via.placeholder.com/300x200) no-repeat center;
background-size: contain;
position: relative;
}
.box:hover {
background: url(http://via.placeholder.com/200x300) no-repeat center;
}
.height p {
position: absolute;
left: -60px;
top: 45%;
-webkit-transform: rotate(-90deg);
}
.width p {
position: absolute;
left: 40%;
top: -40px;
-webkit-transform: rotate(0);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</div>
<div class="width">
<p>width: 400px</p>
</div>
</div>
You could try using background-size:cover
.box{
width: 500px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.around-image{
background: url(http://via.placeholder.com/300x200/ff0000) no-repeat center;
background-size: cover;
display: inline-block;
}
img{
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
opacity: 1;
vertical-align: middle;
}
.helper{
display: inline-block;
height: 100%;
vertical-align: middle;
}
img:hover{
opacity: 0;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>
You could use something like this -
#target {
width: 200px;
height: 200px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRN_bhuF3l7rhMNNBk4lgEoOp2qnB2TAJd5h_rVGtsWzZ0K0uzs');
}
#target:hover {
background: url('http://3.bp.blogspot.com/-KdSQjJhV4jI/TpMRe96ndUI/AAAAAAAACfQ/BC6ZMvbp_DA/s1600/gerbera-elegant-flowers-9.jpg');
}
<div id="target"></div>
Adjust the background css properties to suit your need.
Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
height: 220px;
border: 4px solid red;
border-radius: 50%;
position: relative;
object-fit: none;
}
If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
<img src="..." />
</div>
And the styling.
.userdp {
height: 220px;
width: 220px;
border-radius: 50%;
overflow: hidden;
}
I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/
You can use the following,
**HTML**
<div class="circle">
<div class="image">
<img src="your-image.png" />
</div>
<div class="color">Text</div>
**CSS**
.circle{
width: 220px;
height:220px;
border-radius: 50%;
overflow:hidden;
}
.image, .color{
width:50%;
float:left;
height:100%;
}
.color{
background-color: #099;
}
You can do this as follow:
https://jsfiddle.net/ivan0013/f1a06cxe/
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 55px;
width: 110px;
}
.right,
.left {
height: 110px;
width: 55px;
}
.top {
border-top-left-radius: 110px;
border-top-right-radius: 110px;
}
.right {
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
}
.bottom {
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
}
.left {
border-bottom-left-radius: 110px;
border-top-left-radius: 110px;
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
overflow: hidden and a little more play with the positioning, z-index, and object-fit may help you achieve that.
Here is an example for you (EDITED after re-reading your question):
.userdp {
height: 220px;
width: 220px;
border: 4px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.userdp-img {
z-index: 1000;
width: 100%;
height: 100%;
object-fit: cover;
}
.userdp-info {
z-index: 2000;
width: 50%;
height: 100%;
color: #ddd;
background-color: red;
border-right: 3px solid black;
}
.userdp-info-inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.userdp-img,
.userdp-info {
position: absolute;
top: 0;
left: 0;
}
<div class="userdp">
<div class="userdp-info">
<div class="userdp-info-inner">
John Doe
</div>
</div>
<img src="https://unsplash.it/300/300?image=1005" class="userdp-img">
</div>
Hope it helped.
Title explains what I want to achive, here is the code:-
HTML
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
CSS
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
z-index: 0;
position: fixed;
top: 100px;
}
#block{
height:1000px;
}
#square{
height: 100px;
width: 100px; background: red;
margin-top: 200px;
display: block;
z-index: 9999999;
opacity: 1;
}
JSFiddle
As you can see, on scroll the #square sits under the background image, is there any way to display this over the #header-shadow?
Yes, like this, where you can remove your z-index and set position: relative to #block.
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
position: fixed;
top: 100px;
}
#block{
position: relative;
height:1000px;
}
#square{
height: 100px; width: 100px; background: red;
margin-top: 200px; display: block; opacity: 1;
}
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
I'm trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo