I need to add a very thin stripes pattern over an image in html. I can't really add it to the image itself for multiple reasons (images are uploaded in a CMS, must be used in other places without the stripes, and i also want the pattern to remain unscaled, whereas the images do scale...).
So i made a transparent PNG with the pattern, put it over the image with a pseudo element and use background-repeat to loop it over the entire image (see snippet).
The problem i have is that the image is blinking/flashing when i scroll the page down. Tested on Firefox & Chrome with the same result. I tried different other options like using a very big stripe image to avoid background-repeat, or using a non transparent image with mix-blend-mode:multiply, but the result is always the same.
I also tried a pure css solution with repeating linear background but the rendering is not very good because the pattern is too thin.
The only way i can have a clean rendering is by inlaying the pattern in the original image, no blinking then, but this is not really an option for the reasons mentionned above.
Any ideas ? Thanks :-)
#container {
position: relative;
}
#container:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://indelebil.fr/stripes.png) repeat;
}
img {
display: block;
max-width: 100%;
}
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
We can do this with linear-gradient
No need to use strips.png
body {
height: 300vh;
}
#container {
position: relative;
overflow: hidden;
}
#container:after {
content: '';
position: absolute;
top: -200vh;
left: 0;
right: 0;
bottom: 0;
width: 200vw;
height: 400vh;
background-size: 3px 44px;
background-repeat: repeat;
background-image: linear-gradient(to left, transparent -5px, #000000a3 8px, transparent 26px, transparent);
transform: rotate(-45deg) scale(1.5);
}
img {
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack Overflow</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
</body>
</html>
I finally found a workaround, the flashing effect tends to disappear by lowering the pattern opacity, it is still present but it becomes kinda acceptable under 0.6% alpha.
By the way if anyone has a better way keeping 100% opacity i would be happy to hear about it !
#container {
position: relative;
}
#container:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://indelebil.fr/stripes.png) repeat;
opacity:.5;
}
img {
display: block;
max-width: 100%;
}
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
Related
my HTML looks like this. i was trying to make a landing page with a cover and a button. this is my first time working on a real project and stumble upon this problem where the page does not have much elements and just a button
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.wrap {
background-image: url("../desktop.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#media (max-width: 39.9375em) {
.wrap {
background-image: url("../mobile.jpg");
}
}
.btn {
font-size: 1rem;
display: inline-block;
padding: 1rem 4rem;
background: #e6a503;
border: 0;
border-radius: 50px;
cursor: pointer;
font-weight: 900;
color: black;
-webkit-transition: opacity 100ms ease-in-out;
transition: opacity 100ms ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.9;
}
.btn:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.btn-container {
position: absolute;
bottom: 20%;
left: 25%;
}
#media (max-width: 39.9375em) {
.btn-container {
top: 35%;
left: 70;
}
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/style.css" />
<title>title</title>
</head>
<body>
<div class="wrap">
<div class="btn-container">
<a href="https://www.google.com/" class="btn" target="_blank"
>အကောင့်ဖွင့်ရန်</a
>
</div>
</div>
</body>
</html>
what is causing the white space? also my button is jumping around in different browsers
pls help. thanks in advance.
this white space
Your problem is the css used to place the background image. If you want the image to cover all the background you first need to place it on the body. Not on the wrap.
Then use the following css:
body {
background-image: url(../desktop.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
As you can see I changed background-position to center.
In case you really wanted to use the image only on the wrap then also change the background-position to center. Also you need the following css on wrap to ensure it fits the whole page:
position: absolute;
top: 0;
width: 100%;
height: 100vh;
Notice the position: absolute; which is necessary in order to top:0 to work. In desktop it works just fine. It may be possible that on mobile the wrap component isn't covering the whole windows.
Regarding the centering of your button take a look at this. Just use the following css on the button container:
.btn-container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
As you can see, instead of using top and left with 33% it uses 50% and then it transforms the position of the button 50% to the left of the button (this last 50% is accordint to the button size).
As per my knowledge there is no css property to make background image transparent,
I'm trying again and again but still I'm far from solution,
Here is my approach:
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
filter: opacity(opacity: 30%);
z-index: -1;
background-repeat: no-repeat;
}
I looked for other so questions and found something like, but problem remains.
Put your background to body::after
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
display: block;
position: relative;
margin: 0 auto;
z-index: 0;
}
body::after {
background: url(http://kingofwallpapers.com/background-image-laptop/background-image-laptop-018.jpg);
content: "";
opacity: 0.9;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
div {
font-size: 36px;
color: white;
}
</style>
</head>
<body>
<div>
The text will not affected by the body
</div>
</body>
</html>
Alternative approach is to use an absolute position image as the background and set the image with the following property,
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Using image source URL inside stylesheet make it hard to change the source dynamically.
Usually, the background image is pre-processed, you also might consider making it a transparent PNG file first before upload it into your static server, so you can make the image transparent using image process application like PS, Sketch.
I sharing you my answer, because I think it's a bit better than the accepted solution, mainly because with my solution you can set image URL in HTML, as I need. You can also easyly make different CSS class for different opacity levels :)
CSS:
body.light-bg {
background-position-x: 50% !important;
background-position-y: 50% !important;
background-size: cover !important;
}
body.light-bg::before {
background: white;
content: "";
height: 100%;
opacity: 0.35;
position: absolute;
width: 100%;
z-index: -1;
}
HTML:
<body style="background: url(image.png)" class="light-bg"></body>
You can use rgba background property with white color and opacity.
background; rgba(255, 255, 255, 0.3) url(IMAGE_PATH); /* Add other attributes as required */
You should use opacity property to set the value. The allowed values are from 0 to 1.
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
opacity: 0.3;
z-index: -1;
background-repeat: no-repeat;
}
Check the complete documentation on W3C.
I have created a HTML page. There is a background image in my page. I want to change the opacitry of my background
i.e. opacity of image used in background. I am using this code to add a background image to my page:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url('IMG_18072014_115640.png')}
</style>
</head>
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
</html>
How can I change this code to change the opacity of this background image.
Apply background-image to body's :after :pseudo-element and change its opacity, so that the body's content is not affected.
body, html {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://www.lorempixel.com/600/400);
opacity: 0.3;
z-index: -1;
}
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
I think you misunderstand some things in html,
but one simple solution would be to make a transparent background image... (PNG24 transparency)
Try this way to change opacity of psudo element : DEMO
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
i'm trying to use opacity on a background-image but if i use it it will effect the text aswell.
.content_wrapper{
width:320px;
height:374px;
color:black;
background-image: url('../images/beuningse-boys-midden.png');
background-size:130px;
background-repeat: no-repeat;
background-position-x: 95px;
background-position-y: 155px;
}
You cannot change the opacity of a background-image with CSS. However, there are ways of achieving the same result.
Method 1
This method uses the :after pseudo class which is absolutely positioned inside its parent. The background image is set on this pseudo element along with the opacity giving the impression that the background opacity is set on the background itself.
HTML
<div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
div {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
div::after {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Method 2
If you need backwards compatibility, you will need an extra element in your markup to achieve the same result:
HTML
<div class="container">
<div class="background"></div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
.container {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
.container .background {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Here is a great article with a CSS3 method of achieving the same result:
http://css-tricks.com/snippets/css/transparent-background-images/
Give to the text a class or an id and give it a color without opacity.
p {
color: rgb(120,120,120); // use here what color you want
}
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.