I am trying to darken images using transparency (opacity) so that the foreground text can be better read.
Here is my header HTML:
.header-image {
display: block;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('back.1.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1.0;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image" style="background: url(' URL TO IMAGE') center no-repeat; background-size: cover;">
<div class="headline">
<div class="container">
<h1>Headline</h1>
</div>
</div>
</header>
You will see that I added 'opacity: 1.0;' on the last line of 'header-image' but it didn't work.
Any idea where I am going wrong here?
Thanks
Well you don't want to change transition of whole div, just an image I guess. You should place it using ::before pseudo-element. Now all css attributes will apply only to ::before:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headlines</h1>
</div>
</div>
</header>
</body>
</html>
CSS:
.header-image {
position: relative;
overflow: hidden;
height: 180px;
}
.header-image:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.headline {
}
.headline h1 {
position: relative;
z-index: 1;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.3);
color: #FCFCFC;
margin: 0;
}
https://jsbin.com/lisakez/edit?html,css,output
You can't apply opacity to a background image.
One way to get around this is to place the image you want as the background directly over the top of the container, which gives the impression it is set as the background. Then place any text directly over the top of the image by applying a higher z-index to the text.
.header-image {
position: relative;
overflow: hidden;
text-align: center;
}
.header-image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
.headline h1 {
position: relative;
z-index: 2;
font-size: 50px;
font-weight: 500;
background: #24292E;
background: rgba(36, 41, 46, 0.7);
color: #FCFCFC;
}
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Headline</h1>
<img src="your-image.jpg">
</div>
</div>
</header>
See fiddle
Related
I want to create background-image full-screen in HTML, and CSS but without scrolling background-image doesn't to move up or down.
Any idea?
* {
margin: 0;
padding: 0;
}
img {
background-image: url("./Landing_Page_TBB.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
<body>
<div class="background-image">
<img src="./Landing_Page_TBB.jpg" alt="">
</div>
</body>
Here is code what I have created.
You were in the right direction. Take a look at this:
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
You can test it here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
* {
margin: 0;
padding: 0;
}
.background-image {
background-image: url("https://i.pinimg.com/564x/0a/a8/bf/0aa8bfa73e2f93d3816b75bbd1b4a95a.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
<body>
<div class="background-image"></div>
</body>
Since you said that you'd like to display your image in the background in full screen mode and not scroll away, I would suggest the following:
.background-image {
position: fixed;
top: 50%;
left: 50%;
min-width: 100vw;
min-height: 100vh;
transform: translate(-50%, -50%);
z-index: -1;
}
.very-high-paragraph {
height: 1500px;
background-color: rgba(255, 255, 255, 0.5);
}
<img class="background-image" src="https://filesamples.com/samples/image/jpeg/sample_640%C3%97426.jpeg">
<h1>Hello World</h1>
<p class="very-high-paragraph">Lorem Ipsum</p>
But the better suited option would be to use the CSS property background-image and discard the <img /> tag you're currently using. I think you mixed up two things there.
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I am making a background image, making it darker and blurry. I also need to keep the texts all clear and unaffected by blurriness. I've written so many text already, and I am trying to figure out to bring them all back to clarity.
So far I have:
In HTML:
<body>
<div class="bg">
</div>
</body>
In CSS:
body, html {height: 100%; width:100%;}
.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Help would be much appreciated.
I think that this would be what you were looking for:
https://css-tricks.com/apply-a-filter-to-a-background-image/
I have also provided a runnable code snippet for your convenience:
body {
height: 100vh;
padding: 0;
display: grid;
align-content: center;
justify-content: center;
}
.bg {
width: 300px;
height: 300px;
display: grid;
place-items: center;
color: white;
position: relative;
}
.bg::before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg);
background-size: cover;
filter: blur(3px);
}
.module-inside {
position: relative;
font: bold 42px sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<div class="bg">
<div class="module-inside">Content</div>
</div>
</body>
</html>
This will work:
Working example: https://jsbin.com/coduvusova/edit?html,css,output
HTML:
<div class="wrapper">
<div class="bg">
</div>
<div class="content">
<p>
This is the text...
</p>
</div>
</div>
CSS:
body,
html {
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
}
.bg {
position: absolute;
min-height: 500px;
width: 100%;
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
p {
background-color: red;
color: white;
padding: 5px 10px;
z-index: 2;
}
This might help
body, html {
height: 100%; margin: 0;font-family: Arial, Helvetica, sans-serif;}
.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-text {
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
<div class="bg"></div>
<div class="bg-text">
<h1>Your text</h1>
</div>
This might be a rookie question, but I can't find an answer anywhere. I'm writing a website with parallaxed background images and want to make said images a bit transparent as opposed to the text above them, which should be completely opaque. I followed w3school's model (with some changes) and it works considering that background image is defined in the parent container, so the text inherits the image's opacity, as seen in bgimg-2.
What I've tried to do, appart from fiddling with the stylesheet to no avail, is to create a new container section-img that encapsulates both the background and the text, so their styles don't overlap with each other. This, however, makes the image's (bgimg-1) height equal to 0.
Here's an MRE:
<!DOCTYPE html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #282828;
font-family: sans-serif;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-img {
position: relative;
min-height: 100%;
}
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.bgimg-2 {
position: relative;
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: white;
font-size: 7vw;
letter-spacing: 2vw;
}
.section-text {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-weight: bold;
color: white;
letter-spacing: 2vw;
font-size: 3vw;
color: #f7f7f7;
}
</style>
<body>
<div class="section-img">
<div id="title">No background picture here!</div>
<div class="bgimg-1"></div>
</div>
<div class="bgimg-2">
<div class="section-text">I want different opacities :(</div>
</div>
</body>
</html>
What's the sanest way to achieve this difference in opacities for both items?
Why Don't you use "rgba" style(CSS input), "rgb" will set the colour of the background and the "a" command will set the opacity (transparency) of the image, it can be set between 0-1 where 0 is transparent(0% opacity) and 1 is 100% opacity. i hope this helps!!
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
// z-index: -1; // you won't need this
// add position relative so that the ::before position absolute will be in relation to it's parent and not the body:
position:relative;
}
// .bgimg-2 { // don't need this div
.bgimg-1::before { // add this instead
// position: relative; // no this instead:
position: absolute;
top:0; left: 0; right: 0; bottom: 0;
// end this instead //
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
Ok, so I have a background image using the background-size: cover. Now I know IE does not like it. So I am trying to implement some of the methods it discusses on this page: http://css-tricks.com/perfect-full-page-background-image/ using a CSS file for IE. I want my background-size:cover to stay the same for all browsers but IE and then an IE CSS to kick in for IE browsers so it has the same look and feel. The solutions I tried are not working. Please help. My portfolio page url is: http://spenry.mydevryportfolio.com/portfolio/
The header/background image HTML (I added the Div and IMG here to kick in for my CSS IE but in other browsers I have in my regular style sheet to hide the contents of this div because in other browsers my image is displayed through my CSS below as a background-size cover)
<article class="fullheight">
<div id="bg">
<img src="builds/images/gallery/web_photo.jpg" alt="Girl shooting an arrow with her bow">
</div>
<div class="hgroup">
<h1>Bowpen Designs</h1>
<h2>Aim Your Sites</h2>
<p><img src="builds/images/misc/arrow.png" alt="down arrow"></p>
</div> <!-- hgroup div -->
</article> <!-- fullheight -->
CSS:
header .fullheight {
background:url(../images/gallery/web_photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#bg {
display: none;
}
header .fullheight .hgroup {
padding: 100px 0;
}
header .fullheight .hgroup h1 {
color: #FFFFFF;
font-size: 5em;
font-weight: 900;
line-height: 1.15em;
text-shadow: #000000 0 0 20px;
text-align: center;
}
#media (max-width: 650px) {
header .fullheight .hgroup h1 {
font-size: 2.5em;
}
}
header .fullheight .hgroup h2 {
display: block;
color: #FFFFFF;
width: 60%;
max-width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid #FFFFFF;
margin-top: 15px;
padding: 10px;
font-size: 1.3em;
background: rgba(18, 64, 133, 0.5);
}
header .fullheight .hgroup p {
text-align: center;
}
header .fullheight .hgroup p img {
padding-top: 50px;
max-width: 50px;
}
Here is the CSS for my IE CSS - I've attempted two of the different methods here from that site but I should probably delete one. But neither worked by themselves in IE as I tried both. I must be doing something wrong.
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.fullheight {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg',
sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg', sizingMethod='scale');
}
Hopefully this will help you. I had a project, which required a background image and I too wanted it to work in all browsers. Here is how I got mine working
css:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Can you please try
background-size: auto