I am looking for a way to horizontally repeat simple color background stripe, but only from the center of the page to the right. I am not sure how to do this.
There is no easy way to achieve this but not impossible, you can use CSS :after pseudo to do so.
Here, I am using :after pseudo element, and than we are using CSS Positioning technique to position the element 50% from the left and than with the negative z-index we push that to the back.
Demo
div {
height: 100px;
position: relative;
overflow: hidden;
}
div:after {
content: "";
left: 50%;
width: 50%;
background-image: url(http://virgo.unive.it/itadict/search/images/bullet.png);
position: absolute;
min-height: 16px;
z-index: -1;
top: 0;
}
Related
I'm trying to apply a watermark(with an image) to an image inside a carousel. I replaced my previous ngx-bootrap/carousel by ng-image-slider. In my previous code, I use this and it works fine:
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("/assets/images/confidential.png");
background-size: 300px 300px;
background-repeat: space;
opacity: 0.9;
}
Now, I find the container in the DOM and located the classs to override the css by my custom watermark css (is what the author recommends):
ng-image-slider .ng-image-fullscreen-view .custom-image-main img {
content: '';
display: block;
background-image: url('/assets/images/confidential.png');
background-size: 300px 300px;
background-repeat: space;
opacity: 0.9;
border: 3px solid orange;
}
It 'works', because while the image is loading, I can see the background with my image, but after the load, it disappears..
While loading:
After the image load, the background get covered and I cannot see anything:
Is this a normal behaviour? Is possible to maintain the background in the front line?
Thanks!
You forgot to use ::after in your example code. Add that to the container of the image since ::after doesn't work on img. I would suggest the following, but make sure that either .custom-image-main or another parent in your slider has position: relative; or the absolute positioning won't work.
.ng-image-slider .ng-image-fullscreen-view .custom-image-main::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('/assets/images/confidential.png');
...etc
}
I'm going nuts! lol
I'm trying to position one image to the bottom of a page but it only works if the page is on large width...say 1360px, but when I shrink the with exactly to the 1206px and less, the body the image is pushed up creating a padding to the bottom as you can see in the image bellow (The image is represented by the green box).
The green image is positioned using this CSS:
body::after {
content: "";
width: 556px;
height: 767px;
position: absolute;
bottom: 0;
right: 10%;
display: block;
background-image: url("imagens/ghost-dog.png");
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
And also there is a transparency (this purplish shadow) I added using other property that don't sticky to the bottom too. Using this CSS:
body::before {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
And last to make my mind go round and round there is a background to the body but it fits ALL screen as expected:
body {
color: #fff;
font-size: 15px;
line-height: 21px;
font-family: "comfortaa-regular";
background-color: var(--cor-roxa);
background-image: url("imagens/logo-bg.svg");
background-repeat: repeat;
}
html, body {
height: 100%;
}
I've already tried to position body relative, but it didn't solve the issue. I don't know if it matter but I'm using bootstrap and my divs are organized like the image below:
Any suggestions?
Without any example to review this is difficult to determine a cause. That said, what immediately comes to mind is a child element with a margin is overflowing it's parent container pushing the window boundary but not it's parent containers boundary.
I would inspect your elements and toggle any margins to see if this has any effect.
If you add your code to a fiddle I can take a look and update this if I notice the issue.
I have a div with a set size which I need to add a background image to. However I would like the image to fill the width of the div but be cropped to take up up say one third to a half of the height of the div. I've managed this using a pseudo element like so:
<div class="card-wrap bg-img-3"><div class="card">
<div class="top">
<h2 class="white">Heading</h2>
</div>
</div></div>
.bg-img-3:before {
content: '';
position: absolute;
width: 9.4cm;
height: 3cm;
z-index: -1;
background: url("./img/video.png");
}
But using this technique I don't seem to able to add a background colour to the bottom half of the div.
How can I use a cropped background image and background colour on the same div?
You can use after to set background color if you want
.bg-img-3:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
background-color: #f00;
}
If you call the background property alone, you will generalize your command. Instead, be more specific and use background-image. This will tell the browser you'll want to use various properties for your background. You may want to remove the pseudo element ":after" as I believe it is not required in this method. Try the following in your style:
.bg-img-3 {
content: '';
position: absolute;
width: 9.4cm;
height: 3cm;
background-image: url("./img/video.png");
background-repeat: no-repeat;
background-size: 9.4cm 1.5cm;
background-color: #999;
}
Please let me know if this helps. Cheers.
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?
Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2