been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>
I'm looking to have below image.
How about this approach?
JSBin
body {
background: white;
margin: 0;
}
.main-header {
background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
background-position: center;
background-size: cover;
min-height: 480px;
position: relative;
}
.main-header::after {
content: '';
display: block;
position: absolute;
background: transparent;
/* You can play around with these numbers to adjust the curve */
bottom: -4rem;
left: -25%;
width: 150%;
height: 400px;
border-bottom: solid 4rem white;
border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>
You can use below code for it
Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-bottom-left-radius:60% 30%;
border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>
if you can use image by img, not background. I think you can try "clip-path" as below.
Codepen example
HTML:
<div class="main-header">
<img src="http://placehold.it/150x150">
</div>
CSS:
img {
-webkit-clip-path: circle(100% at 50% 0);
clip-path: circle(100% at 50% 0);
}
and this site is useful to make clip-path (http://bennettfeely.com/clippy/)
Related
My goal: to place a png image within round colored circle (and create an avatar with margin).
I can create two different classes one for the background (the pink circle) and another for the image (the cat) like so:
.avatar-bg{
width: 45px;
height: 45px;
padding: 3px;
background: #FFFFFF;
border-radius: 50%; //make round
justify-content: center;
align-items: center;
}
.avatar {
width: 38px;
height: 38px;
}
and html will look like this
<div class="avatar-bg"><img class="avatar" src="myImg.png"/></div>
Is there a way to consolidate them into one class?
You can consolidate things into both one class and one element.
(NOTE: the original version of this answer had the formatting the other way round - the whole thing being a circle - this snippet follows the image now shown in the question).
You can put the avatar and a radial gradient as combined background images on just one div. The radial gradient comes first in the list which means it covers part of the avatar so the avatar looks circular.
Obviously you can change the verious %s to get the amount of avatar you want to show within the circle.
.avatar-bg {
width: 45px;
height: 45px;
padding: 3px;
background-color: #FFFFFF;
background-color: purple;
background-image: radial-gradient(circle, transparent 0 45%, pink 45% 50%, purple 50% 100%), url(https://picsum.photos/id/237/200/200);
background-size: 100% 100%, 80% 80%;
background-position: center center;
background-repeat: no-repeat no-repeat;
justify-content: center;
align-items: center;
}
<div class="avatar-bg"></div>
Use CSS background properties and a pseudo element.
.avatar-bg{
width: 45px;
height: 45px;
background-color: pink;
border-radius: 50%;
position: relative;
}
.avatar-bg::after {
content: '';
background: url("https://i.pravatar.cc/300") ;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
width: 40px;
height: 40px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="avatar-bg"></div>
This question already has answers here:
two divs split with diagonal line - CSS
(1 answer)
Responsively Align Slanted Divs
(1 answer)
Closed 1 year ago.
I have created one HTML page which is diagonally split.I have put image in right side and some content and button in left.But i am facing 2 issue with my code
1- right side is not fixed and image is not coming properly.
2- The split is not happen for full page
code is here:-
HTML:-
body {
margin: 0;
font-size: 2em;
}
#landing-area {
width: 100vw;
height: 100vh;
display: flex;
}
#box-left {
width: 50%;
clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
margin-right: -4.2vh;
padding: 5px 11vh 5px 5px;
background-color: #F4FCFF;
text-align: center;
}
#box-right {
width: 50%;
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
margin-left: -4.2vh;
padding: 5px 5px 5px 11vh;
text-align: center;
}
#middle-text {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 25%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div id="landing-area">
<div id="box-left">
<div id="middle-text">
<img src="images/logo.png">
<h>Header goes here</h>
<p>4 line paragraph goes here</p>
<button>Button name</button></div>
</div>
<div id="box-right">
<img src="images/landingPage.png">
</div>
</div>
</body>
Image:-
I want the page should be look like below
I suggest a slightly different approach because you want to be sure that your text etc within the left block will fit whatever the viewport width. One way of ensuring this is to have the left hand block at width 50% less 10vh. i.e. not try the complicaed business of getting text to fit within a sloping side.
This snippet gives the whole page the pale background color, the left block sized as above and the right block it gives width 50% plus 10vh and clips it (polygon is slightly altered to make it correct for this width).
body {
margin: 0;
font-size: 2em;
}
#landing-area {
width: 100vw;
height: 100vh;
background-color: #F4FCFF;
position: relative;
}
#box-left {
width: calc(50% - 10vh);
padding: 5px 11vh 5px 5px;
text-align: center;
display: inline-block;
height: 100%;
box-sizing: border-box;
}
#box-right {
width: calc(50% + 10vh);
clip-path: polygon(10vh 0, 100% 0, 100% 100%, 0 100%);
padding: 5px 5px 5px 11vh;
text-align: center;
background-image: url(https://picsum.photos/id/131/1024/768?blur=2);
background-size: cover;
background-position: center center;
display: inline-block;
height: 100%;
position: absolute;
box-sizing: border-box;
}
#middle-text {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 25%;
margin-top: -100px;
margin-left: -200px;
}
<div id="landing-area">
<div id="box-left">
<div id="middle-text">
<img src="images/logo.png">
<h>Header goes here</h>
<p>4 line paragraph goes here</p>
<button>Button name</button></div>
</div>
<div id="box-right">
</div>
</div>
Note: you'd need to make your px dimensions currently used for the text into relative ones so that the whole thing is responsive (this is true whether you use the method here or some other method).
You can see the code from codepen. Visit https://codepen.io/chris22smith/pen/vvYBGY
HTML:-
<body>
<div class="view">
<div class="left">
<div class="sun"></div>
</div>
<div class="divider"></div>
<div class="right">
<div class="moon"></div>
</div>
</div>
</body>
CSS:-
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
transform:skew(-10deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.divider {
background-color:#fc0;
border-left:solid 2px #000;
border-right:solid 2px #000;
bottom:-5%;
left:50%;
position:absolute;
right:50%;
top:-5%;
z-index:1;
}
.right {
left:50%;
right:-5%;
}
.sun,
.moon {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
transform:skew(5deg);
}
.sun {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.moon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
I need to have a second image align left of the text but layered on top of the background image. I am having some trouble figuring out what css I need to make this work. Currently everything I have tried messes with the text positioning or the background image.
Luckily, this is a personal project so there is no timeline but I would appreciate any help that could be given.
I just started learning web development this past year so it all still feels a little new to me.
.hero-full-container {
height: 100vh;
position: relative
}
.background-image-container {
background-size: cover;
background-repeat: no-repeat;
background-position: 50%
}
.white-text-container h1 {
color: #fff
}
.overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .3) 0, transparent 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#4D000000", endColorstr="#00000000", GradientType=0)
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
.row {
margin-left: -15px;
margin-right: -15px
}
.col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
.col-md-7 {
width: 58.33333%
}
.col-md-offset-1 {
margin-left: 8.33333%
}
.hero-full-wrapper .text-content {
padding-top: 30%
}
<div class="hero-full-container background-image-container white-text-container" style="background-image:url('./assets/images/home_01.jpg')">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-md-offset-1">
<div class="hero-full-wrapper">
<div class="text-content">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
<!--<p>Lorem ipsum</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
I don't undestand very well your question, but if you want to have a background image and another image above this image, you can do this creating more div. Once you insert a background image, you can insert another div inside this div, e.g. :
<div class="main-container">
<div class="second-image">
<img src="link_to_your_image">
</div>
<div class="text-area">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
</div>
</div>
and the for css, you can use flex property, setting the direction to flex-direction: row, e.g. :
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.main-container {
width: 100%;
height: 100%;
background-image: url('link_to_your_image');
background-color: red;
display: flex;
flex-direction: row;
align-items: center;
}
.second-image, .text-area {
margin-left: 50px;
}
I hope this can help you, have a nice day.
I have a simple question which I can't seem to solve.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1">Point 1
</div>
<div id="tps_point2">Point 2
</div>
<div id="tps_point3">Point 3
</div>
</div>
The idea is that there are 3 images side by side, and when the mouse hover's over each image, the image changes to a highlighted one, and the image is clickable too, so that the user is taken to some other place when the image is clicked.
I have managed to apply the hover effect, but I can't get the linking to work.
Can someone help me out ?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/
If you're able to change the HTML, just lose the inner div tags and apply exactly the same styles to the links themselves:
<div id="tps_block">
Point 1
Point 2
Point 3
</div>
Updated jsFiddle: http://jsfiddle.net/Fjmnt/7/
Best solution if you are unable to modify the HTML.. add the following CSS.
#tps_block a {
display: block;
width: 100%;
height: 100%;
}
This will fill <a> making the entire div clickable.
jsFiddle demo
<div id="tps_block">
<div id="tps_point1"></div>
<div id="tps_point2"></div>
<div id="tps_point3"></div>
</div>
Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}