Working in Dreamweaver, I'm trying to get a background image that is the same on every page. I want it to be set and fill the whole page, have content scroll not the picture, and I need the picture to be a bit transparent, so the text will be easier to read. I have NO idea how to do opacity other than that this is what I have in my Style.css class.
body {
overflow-x: hidden;
width: 100%;
background-image:
url(/CuzbZDV%5B1%5D.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
Try with that:
body:before {
position: fixed;
z-index: -1;
content: " ";
top: 0; left: 0; right: 0; bottom: 0;
background: url() no-repeat center center fixed;
background-size: cover;
opacity: .5;
filter: alpha(opacity=50); /* IE8, I believe... */
}
Related
In the following example only background-color displays but the image is not visible. The opacity also seems to be not working.
.my-container {
position: relative;
background-color: blue;
min-height: 100px;
}
.my-container:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position: 100% center;
background-repeat: no-repeat;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
<div class="my-container">
<p>Contents</p>
<div>
Your code actually works and image is visible, but you set opacity: 0.1 and background: blue so it's barely visible. Just increase the opacity and maybe change background-color to more user friendly.
I cleaned up your code and placed content on top of image. In your example content has on image overlay which makes text harder to see.
.my-container {
position: relative;
background: blue;
height: 200px;
font-size:2rem;
color:#fff;
}
.my-container:before {
content: '';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
opacity: 0.6;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
#content{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
}
<div class="my-container">
<div id="content">CONTENT</div>
<div>
It seemed to work just fine for me. I can see the picture when I set opacity: 0.5; And the blue background is still there. So I would suggest just raise your opacity
higher than 0.1. And see what looks best for you.
Please use the css filter: brightness(80%); instead of opacity.
filter: brightness(50%);
I am in the middle of putting together a really basic site, where the header has an image that is "fixed" (CSS) for a "paralax"-ish effect.
However, on iOS devices, this background image renders out strangely, showing a very zoomed in version of the image when compared to literally every other browser/mobile device.
I have tried playing with all of the background-* properties, but I can't get any of them to work correctly for the life of me! I don't know if there's a -webkit-background-*I should be looking for, but in theory my implementation is fairly simple/standard!
Styles:
#header {
padding: 3em 0;
text-align: center;
width: calc(100% + 10em);
margin: 0 -5em;
height: 500px;
position: relative;
z-index: 2;
overflow: hidden;
}
#header .content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}
#header .content .logo {
display: block;
margin: 0 auto 1.5em;
max-width: 75px;
z-index: 2;
position: relative;
}
#header p {
font-size: 1.25em;
letter-spacing: -.025em;
margin: 0 0 2em;
position: relative;
z-index: 2;
}
#header:after {
content: "";
background-image: url(/static/media/16fcfe6…/will-stocks-profile.322ff34c.jpeg);
opacity: .35;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
background-attachment: fixed;
background-position: 100% 33%;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(3px);
filter: blur(3px);
}
The HTML markup for the element in question:
<header id="header">
<div class="content">
<img src="/assets/images/Logo.png" class="logo" alt="Logo">
<p>Tech reviewer, IT professional & avid blogger.</p>
</div>
</header>
Visiting the site (currently in a "test status) on any other mobile device/tablet (or even using Chrome DevTools devices) and the image displays exactly as intended. But visit it on an iOS device and you'll see that there's just a small section of the image visible (rotate to landscape and you'll see a little more) - it looks like the image becomes zoomed?
I have now included a media query, which resolve the image sizing issue by using background-attachment: scroll; instead of fixed - however doing this removes the "parallax" effect on mobile devices (which I understand can be considered expensive):
#header:after {
content: "";
background-image: url(./../images/will-stocks-profile.jpeg);
opacity: 0.35;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
background-position: 100% 33%;
background-repeat: no-repeat;
background-size: cover;
filter: blur(3px);
}
#media screen and (max-width: 999px) {
#header:after {
background-attachment: scroll;
}
}
#media screen and (min-width: 1000px) {
#header:after {
background-attachment: fixed;
}
}
In theory, it should be a simple job to build out a little Javascript snippet to keep an image pinned to the top, however I don't know how this will work with a background-image on an :after pseudo... And surely a JS scroll event listener is going to be more expensive than using CSS?
I have an image for my background that has an opacity on .4. I have an image in front of it that seems have the same opacity. What do I do so the opacity of the front image is 1.0?
Here is a jsfiddle.
http://jsfiddle.net/aaronmk2/6zjtgxdm/150/
Here is my html
<div>Hello World
<img src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg" alt="">
</div>
and my css
div{
width : auto;
height : 1000px;
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
opacity: .4;
}
you can give div position relative and use before with same image and give before same opacity.
you can check below given code within jsfiddle.
/* Here is the code Start */
div{
width : auto;
height : 1000px;
position:relative;
}
div:before{
content:" ";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4;
}
/* Here is the code Start */
I found a solution. You need to put your background image in the div::after pseudo element, like this :
div{
width : auto;
height : 1000px;
}
div::after {
content: "";
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
}
Like this, the div element doesn't have the transparent opacity, which was previously applied to its child element, the image.
I updated your fiddle
In the css I have a few images in the style folder so ignore the other images that don't show up. The floating element leftpara and joinbutton(eventhough it's a para not the button) have background white and i want to give it an opacity of .4.
#stuff:before{
display: block; content:""; position: absolute; z-index:-1;
background: url(blah.jpg);
opacity:.3;
top:10%; left: 0; right: 0;
height: 50%;
}
fiddle
You can try this code:
withhsla(0,0%,100%,0.70) or rgba you use a white background with whatever percentage saturation or opacity to get the look you desire.
and you can use filter: alpha(opacity=50); to get the opacity
background-attachment: fixed;
background-image: url(blah.jpg);
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: hsla(0,0%,100%,0.70);
background-blend-mode: overlay;
background-repeat: no-repeat;
filter: alpha(opacity=50);
Your question is slightly vague, however the following code applies "a background on a floating element in css3 and changes its opacity?
div{
float: right;
display:block;
width: 350px;
height: 150px;
background-image: url(http://placehold.it/350x150/ff0000/ffffff);
opacity: 0.5;
}
<div></div>
This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
How to set opacity in parent div and not affect in child div? [duplicate]
(7 answers)
Overlay a background-image with an rgba background-color
(5 answers)
Closed 7 years ago.
I'm trying to give my full page background-image an opacity but when I add the opacity code, my whole html get's an opacity of 0.4 exept the image.
html {
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source
I tried to add opacity like this:
html {
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.4;
}
But as I said, my whole html turns 0.4
And I tried to add 0.4 after background: url(../img/bg2.jpg) no-repeat center center fixed 0.4; but my image just goes blank then.
How can I add 0.4 only to my background-image?
Try using ::after pseudoclass:
html::after {
content: "";
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
I use the :after psuedo element on the body tag in these cases, together with some absolute positioning and the opacity property: https://jsfiddle.net/kc0sf39r/
HTML:
<body>
content
</body>
CSS:
body {
background: url("http://digital-photography-school.com/wp-content/uploads/flickr/205125227_3f160763a0_o.jpg") no-repeat;
width: 100%;
height: 100vh;
position: relative;
}
body:before {
position: absolute;
top: -99px;
bottom: -99px;
left: -99px;
right: -99px;
background-color: red;
content: " ";
opacity: 0.5;
}
Set opacity for body also and try again :
body {
opacity : 1;
}