I'm a total newbie. And I ran into this problem. Alas, I did not find a definite answer on the net, so I decided to turn here.
The task is that I need to overlay the pictures on top of each other, so that it looks like in screenshot No. 2, i.e. we have a yellow spot overlay, and a full size image that needs to be cropped.
From what I know, I've tried everything. I ask for help and do not throw tomatoes. Thanks in advance
Example code (html, css):
<p class="card">
<img class="one" src="/" alt="123">
<img class="two" src="/" alt="123">
</p>
.card {
position: relative;
z-index: 10;
width: 100%;
}
.one {
position: absolute;
width: 350px;
top: 50px;
left: 55px;
z-index: 5;
}
.two {
position: absolute;
width: 350px;
left: 20px;
top: 25px;
z-index: 2;
}
Use mask image property to mask like that shape and use position:absolute and do Further
-webkit-mask-image: url(---.png); //use the image shape to mask
mask-image: url(---.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
Related
I need to create full width, transparent triangle with border and some elements inside via CSS. Does somebody know how to do that?
Thanks in advance.
You can create triangle as vector (svg) here.
You can convert from svg file to base64 here.
body {
background-color: #444;
}
#triangle {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBpZD0ic3ZnXzEiIGQ9Im0yLjk5LDc5Ni44MzM4MmwzOTYuOTk5OTgsLTc5My43NTA3bDM5Ni45OTk5OCw3OTMuNzUwN2wtNzkzLjk5OTk3LDB6IiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cgo8L3N2Zz4=");
background-size: cover;
background-repeat: no-repeat;
height: 300px;
position: relative;
width: 300px;
}
#circle {
background-color: #7220fd;
border-radius: 50%;
height: 90px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, 20%);
width: 90px;
}
<div id="triangle">
<div id="circle"></div>
</div>
See it on jsfiddle.
You did not provide any code or background image to use, I have to generate new for testing and the result may not exactly to your screenshot. However you can change the triangle vector using the link above.
To customize circle position, change the argument of translate(). The first is horizontal position, second is vertical position.
I'm trying to use an SVG as a background for a specific section on a website I'm creating, but I'm finding it difficult. The main problem I'm having is the SVG covers the text, but in the image, I'll link below the SVG is behind the text.
This is the image
This is some code I wrote which didn't work.
.icons_and_text {
margin-top: 100px;
position: relative;
}
.icons_and_text::before {
content: '';
background-image: url('./images/bg-curvy-desktop.svg');
background-size: cover;
position: absolute;
top: -600px;
left: 10;
height: 400px;
width: 100%;
}
I'm looking for answers which would enable me to solve the problem on my own next time, thank you.
Hope it works for you
header .container {
position: relative;
z-index: 1;
}
This seems to work, although it's not exactly what I want. What I want is a perfect way to position the image.
header.header {
background-color: hsl(217, 28%, 15%);
background-image: url(../images/bg-curvy-desktop.svg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 23rem;
}
So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.
This is my code
<div class="jumbotron">
div class="hero-dashboard">
<img class="center-block" src="../../img/hero-dashboard.png">
<div class="fade-bottom">
</div>
</div>
CSS
.jumbotron{
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
}
}
They all have to be inside the "jumbotron" div.
Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?
1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.
.jumbotron {
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
position:relative;
top:0;
left:0;
width: 500px;
height:30px;
} // correct this closing tag
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
} //correct this
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
// } remove this
// } remove this
2- also correct opening tag < before div class="hero-dashboard">
3- correct the order of opening and closing tgas in your css {}. They seem weird!
Thanks for your help.
I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.
I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}