So this is my code. I would like to display my image via data-bg on my div::after pseudoelement. I always get url, but I want display image.
body {
background: red;
width: 100vw;
height: 100vh;
}
div:before {
content: attr(data-bg);
display: block;
}
<div data-bg="https://via.placeholder.com/150"></div>
Code correction
There is a few errors in your code:
If you want to get the image at the requested url, you need to use url()
You are using content instead of background-image
Theoretically, your code should you like the following snippet with the corrections, don't forget to add a content and to size you pseudo-element.
body{
background: red;
width: 100vw;
height: 100vh;
}
div:after{
content: '';
background-image: url(attr(data-bg));
width: 150px;
height: 150px;
display: block;
}
<div data-bg='https://via.placeholder.com/150'></div>
Unfortunately, this won't work
The background-image property does not work well with url(attr()), so here is another snippet that does what you are trying to achieve. We're declaring a CSS variable for the element instead of using an HTML attribute. You may find more details in this related question
body{
background: red;
width: 100vw;
height: 100vh;
}
div:after{
content: '';
background-image: var(--bg-image);
width: 150px;
height: 150px;
display: block;
}
<div style="--bg-image: url('https://via.placeholder.com/150');"></div>
<html><head>
body{
background: red;
width: 100%;
height: 100%;
}
div:after{
content: '';
background-image: var(--bg-image);
width: 50%;
height: 50%;
display: block;
}
</head><body><div style="--bg-image: url('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80');"></div></body></html>`enter code here`
Related
First is the code that I want to change.
<style>
h1::after {
content: url(sig01.png);
}
</style>
Second is what I tried, but not working.
<style>
h1::after {
content: url(sig01.png);
display: inline-block;
width: 200px;
height: 200px;
}
</style>
What am I doing wrong?
You can't resize a content-image, but you can work around by using background-image instead of content.
<style>
h1::after {
content: '';
display: inline-block;
width: 200px;
height: 200px;
background-image: url(sig01.png);
background-size: 200px;
}
</style>
Background image is not showing in IE. Whereas its showing well in Chrome.
Here is the CSS:
.banner1 {
background-image: url(/assets/images/banner-1.jpg)!important;
height: 100%;
display: block;
}
.banner2 {
background-image: url(/assets/images/banner-2.jpg);
height: 100%;
display: block;
}
.banner3 {
background-image: url(/assets/images/banner-3.jpg)!important;
height: 100%;
display: block;
}
.banner4 {
background-image: url(/assets/images/banner-4.jpg)!important;
height: 100%;
display: block;
}
html:
<div class="right_bx">
<span class="banner1"></span>
</div>
<div class="right_bx">
<span class="banner2"> </span>
</div>
<div class="right_bx">
<span class="banner3"></span>
</div>
<div class="right_bx">
<span class="banner4"></span>
</div>
When I refresh the page I see banner 1 image appearing. The image in fisrt div is apperaing in IE..For example if I give banner 2 in first div I am able to see banner 2 image. But subsequent div images are not showing up in IE
Not sure this will work but try this
.banner1 {
background-image: "assets/images/banner-1.jpg"!important;
height: 100%;
display: block;
}
.banner2 {
background-image: "assets/images/banner-2.jpg";
height: 100%;
display: block;
}
.banner3 {
background-image: "assets/images/banner-3.jpg"!important;
height: 100%;
display: block;
}
.banner4 {
background-image: "assets/images/banner-4.jpg"!important;
height: 100%;
display: block;
}
use background: url("..."); or
background-image: url("..."); also don't use / at the beginning of the file path.
Change /assets/images/banner-1.jpg to this: assets/images/banner-1.jpg etc.
.banner1 {
background: url("assets/images/banner-1.jpg");
height: 100%;
display: block;
}
.banner2 {
background: url("assets/images/banner-2.jpg");
height: 100%;
display: block;
}
.banner3 {
background: url("assets/images/banner-3.jpg");
height: 100%;
display: block;
}
.banner4 {
background: url("assets/images/banner-4.jpg");
height: 100%;
display: block;
}
Try to use F12 developer tools to check the related elements (whether the image load success or not, and the CSS style). I suppose perhaps the issue is related the div container is empty, so the image not display. you could try to fill content to the div, or refer to the following code to set the fix height property:
.right_bx{
height: 200px;
}
i'm currently trying to create a landing page for a mobile website, and I want two main divs with an image on it. (In my example there are colors). Here is my HTML :
<ion-content>
<div class="upperblock"></div>
<div class="downblock"></div>
</ion-content>
My CSS :
.upperblock{
width: 100%;
height: 50%;
background-color: #2ec95c;
}
.downblock{
width: 100%;
height: 50%;
background: #000;
}
I would like to have a "leaning" separation, something like that (the screenshot of my result, and the red line is where I'd like the separation to be ):
Thank you in advance for any help, couldn't find anything about this !
.container {
position: relative;
overflow: hidden;
background-color: #2ec95c;
}
.upperblock {
width: 100%;
height: 200px;
background-color: #2ec95c;
color: #000;
}
.downblock {
width: 100%;
height: 200px;
background-color: #000;
color: #FFF;
}
.block {
transform: skewY(-6deg);
padding: 50px;
margin: -5% 0;
}
.block * {
transform: skewY(6deg);
}
<div class="container">
<div class="block upperblock">
<h2>content</h2>
</div>
<div class="block downblock">
<h2>content</h2>
</div>
</div>
You may want to add another div down below each div (I think :after should do the trick here) and then turn it with transform: rotate(15deg). This will turn the div.
Important note: Content in the turned box will be also turned. So you may want to seperate the content and background div.
Other way would be to create a svg image. SVG will scale perfectly and the code will look way cleaner ;)
You can also use pseudo-elements to achieve that
body {
margin: 0;
width: 100vw;
height: 100vh;
}
.upperblock {
width: 100%;
height: 50%;
background-color: #2ec95c;
position: relative;
}
.downblock {
width: 100%;
height: 50%;
background: #000;
position: relative;
}
.downblock::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: inherit;
position: absolute;
top: 0;
transform: skewY(-5deg) translateY(-65%);
}
<div class="upperblock"></div>
<div class="downblock"></div>
You can append a block to the upperblock div using CSS and rotate that using transform. You'll need to play with the heights depending on your content but this will expand and be responsive.
.outer {
overflow: hidden;
}
.upperblock{
width: 100%;
min-height: 40vh;
background-color: #2ec95c;
position: relative;
}
.upperblock::after {
content: "";
display: block;
height: 120px;
background: #2ec95c;
width: calc(100% + 50px);
position: absolute;
bottom: -60px;
transform: rotate(7deg);
}
.downblock{
width: 100%;
min-height: 60vh;
background: #000;
}
<div class="outer">
<div class="upperblock"></div>
<div class="downblock"></div>
</div>
I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}
The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy
.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>
Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}
JS Fiddle
I have a div:
<div id="strip"></div>
With the CSS:
width: 100%;
height: 130px;
background: grey;
I want a pseudo element after it and to be at the base of the strip.
#strip:after {
content: "";
display: block;
width: 100%;
height: 10px;
background: blue;
}
I also have a pseudo element before the strip.
#strip:before {
content: "";
display: block;
width: 100%;
height: 10px;
background: yellow;
}
The problem is, the after pseudo element does not sit at the bottom of the strip div. Where am I going wrong. Please note I have simplified the question, I know there are alternative ways to get strips of color at the top and bottom of a div.
The CSS specification says :
The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.
In order to solve your issue, you can use the solution suggested by Nico O. The after pseudo-element is absolute positionned at the bottom of the main element.
#strip{
width: 100%;
height: 130px;
background: grey;
position: relative;
padding-bottom: 10px;
}
#strip:after {
content: "";
display: block;
width: 100%;
height: 10px;
background: blue;
position: absolute;
bottom:0;
}
#strip:before {
content: "";
display: block;
width: 100%;
height: 10px;
background: yellow;
}