I'm trying to add a frame design to a div like the example below :
Gold frame div design
I tried doing this with background image but doesn't work like I want it to because it has to be responsive. Now I'm trying to do this with (:before & :after) but the images won't appear. Am I leaving a line of code behind or something? Help appreciated!
Problem : Picture of problem
//HTML
<div class="second-section">
<div class="container">
<div class="purp-box">
<h1>Welcome to my site!</h1>
<p>Some text goes here.</p>
</div>
</div>
//CSS
.purp-box {
height: 303px;
background: url(../images/box-background.png);
}
.purp-box:after,
.purp-box:before {
content: '';
position: absolute;
top: 0;
}
.purp-box:before {
width: 67px;
height: 303px;
background: url(../images/purp-left-border.png) no-repeat;
right: 100%;
}
.purp-box:after {
width: 67px;
height: 303px;
background: url(../images/purp-right-border.png) no-repeat;
left: 100%;
}
I figured it out, all I had to do was add (box-sizing: border-box;) & (position: relative;) to the main div. Thank you for suggesting image-border as well.
.purp-box {
height: 303px;
background: url(../images/box-background.png);
box-sizing: border-box;
position: relative;
}
Related
I want to make a cool slanted sidebar next to the red part of the page, but I want it to end at the end of its parent element, so that it doesn't reach into the blue part. How can I do that?
My code does not seem to work on this site, but if you insert it on W3Schools or some other page, it will work. Here is the code I have so far:
html {
scroll-behavior: smooth;
}
main {
width: 100%;
height: 100%;
}
article {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
.sideBox {
position: relative;
height: 200%;
overflow: hidden;
width: 20%;
background-color: white;
transform: rotate(-20deg)
}
<!--Font-->
<link href="https://fonts.googleapis.com/css?family=Turret+Road:800&display=swap" rel="stylesheet">
<main style="background-color:red; ">
<div class="sideBox">
</div>
</main>
<article style="background-color:blue"></article>
There's not a perfect way to make it end exactly where the blue article starts, but you can hide it behind the blue article. Give your article a z-index and a position of relative, then make the sidebox just long enough, like 110%;
position:relative;
z-index: 999;
I would like to know how to have a text partially overlaying an image.
Screenshot: → here. (I have circled with blue what I want!)
I have searched for this on Google, but the only result I received was Image Captions, which is not what I am looking for.
Any help will be greatly appreciated.
Just use position: relative in your text element and offset it by some value to the left.
Code:
h1 {
position: relative;
top: 50%;
right: 6%;
}
jsFiddle: → here.
Example:
#wrapper {
display: flex;
justify-content: center;
}
#parent {
width: 550px;
height: 343px;
background-image:
url(https://media-cdn.tripadvisor.com/media/photo-s/08/73/aa/76/trolltunga.jpg);
background-size: contain;
}
#child {
position: relative;
top: 50%;
right: 6%;
}
<div id="wrapper">
<div id="parent">
<h1 id="child">A Fantastic Title<br/>→</h1>
</div>
</div>
I have a skewed popup and text in the quick view of products. But its not rendering correctly in chrome. I tried translate 3d(0,0,0) and also changes the skew deg from odd to even but it doesn't resolved my problem.
Anyone can please help me with this.
Blurring is minor issue while skewing for making the items look smoother. If you really need to make the blurring gone, simply skew only the background div and leave the foreground div untouched.
.background {
width: 300px;
height: 100px;
background: lightgrey;
position: absolute;
top: 60px;
-webkit-transform: skewY(-5deg);
}
.foreground {
width: 280px;
height: 100px;
position: absolute;
top: 60px;
padding: 10px;
text-align: center;
}
.dialog {
width: 300px;
margin: 0 auto;
}
<div class="dialog">
<div class="background">
</div>
<div class="foreground">
<p>Here goes some foreground text.</p>
</div>
</div>
I have this picture:
and I want this picture:
to be over the picture so I get this "dot-effect".
I also have to repeat the picture so it fits the other one. I managed to have them both in the same place but never to have the second one repeated over the first one.
Please help. I googled this for the past 2 days and couldn't figure it out.
You can use multiple background images
.avatar {
width: 180px;
height: 180px;
background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
background-repeat: repeat, none;
}
<div class="avatar"></div>
or alternatively, an actual image in the HTML and a pseudo-element overlay.
.avatar {
width: 180px;
height: 180px;
position: relative;
}
.avatar::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}
<div class="avatar">
<img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>
Use first image as main background, than use position: absolute and background image on another element to place doted image over first one. Why background image for overlay? It's because you can set background-repeat attribute for background (default to repeat x and y).
.wrapper {
float: left;
position: relative;
}
.overlay {
background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/DSToa.png" />
<div class="overlay"></div>
</div>
I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.
So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.
Thank you.
Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs
<style>
.screen {
height: 422px;
width: 820px;
}
.back {
position: absolute;
height: 422px;
width: 820px;
background-image:url('test.png');
}
.content {
position: absolute;
height: 320px;
width: 672px;
margin-left: 73px;
margin-top: 56px;
border-radius: 50px;
overflow:hidden;
}
</style>
<div class="screen" >
<div class="content" >
put here what ever you want to put inside
</div>
<div class="back" ></div>
</div>
this work with me with your image
You could use the before/after psuedo elements to attach your unusual "border" as a background image.
div.slide {
background: yellow;
position: relative;
}
div.slide:before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: url(slide-bg.png) no-repeat;
background-size: 100% 100%;
z-index: 1;
}
http://jsfiddle.net/kTgJJ/
The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.