Don't know how to properly word this, but tried to implement this codepen:
https://codepen.io/danielkvist/pen/LYNVyPL
The div background is a continuation of the actual body background.
When taking it apart and implementing my own, the div doesn't continue, instead becoming it's own background.
Implementation here, what's missing to mimic the codepen?
Main point of interest appears to be:
.overlay {
background-color: var(--lightblue);
background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: -100%;
position: relative;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
width: 200%;
}
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'm trying to transform on hover, the background image that is in a grid. I don't know how to organise my classes so that I can scale the image and not the grid block.
I have this code:
.useful-link1 {
background-color: rgb(255, 255, 255);
grid-column: 2/4;
width: 100%;
height: 100%;
background-image: url(images/nasa.png);
background-position: center;
background-attachment: scroll;
background-size: 40%;
background-repeat: no-repeat;
}
.useful-link1:hover {
transform: scale(1.05);
transition: 0.3s;
}
How would I go about taking the background image out? I know it's an elementary question, not so easy to search for apparently, though.
How do I zoom in a high quality image, for instance 2000px x 2000px, to the center of a container ? I've tried using transform: scale () but it still makes it scrollable vertically or horizontally. I'm specifically looking for a mobile version. How do I make the image zoomed in centered exactly according to the width of mobile? Using width: 100% doesn't help either. And if I define it like in the code below using pixels it is cropped out on mobile. Do I make it exactly width and height or mobile or? I need it to fully cover whole body and be zoomed in exactly in the center of image. Thanks for you answers. Also zoomed quality is really bad even though it is high quality image.
Basically center and zoom this image so that on mobile it will cover whole screen, spin and look like this:
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
}
#wrap {
transform: scale(2.0);
}
#bg {
width: 1400px;
height: 1400px;
background: url(bg.png);
background-size: contain;
background-position: center center;
-webkit-animation: rotation 9s infinite linear;
}
I have been playing around with this a bit. This is what I ended up with.
Here is the logic that I used figuring this out:
An image rotates around its center.
If I put the image in a container it will cut a part of the image off. The image will still rotate around the center of the image....But that is not the center of the container anymore.
Solution: I made the image behave like background: cover; by using min-width: 100%; and min-height: 100%;
Solution: I centered the image in the container using flexbox.
Another way of centering might be preferable, since the flexbox also affects other children of the container. So any improvements/comments about that would be welcome :).
html
<div id="wrapper">
<img src="data:image/png;base64,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" id="image"/>
</div>
css
#keyframes zoom-effect {
0% {
transform: scale(1) rotate(0deg);}
100% {
transform: scale(4) rotate(360deg);}
}
#wrapper{
height: 250px;
width: 350px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#image{
z-index: -100;
min-height: 100%;
min-width: 100%;
animation-name: zoom-effect;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Hope it helps :)
Set width: 100% and remove background-size: contain:
JSFiddle
#bg {
width: 100%;
height: 500px;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
}
<div id="bg"></div>
and if you want to use these styles for the body, add background-attachment: fixed:
JSFiddle
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
You could use background-size: 200% combined with background-position: -50%, -50% or a similar proportion (300% size vs. -100% position offset)
Example:
.x {
width: 400px;
height: 300px;
margin: 100px;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
}
<div class="x">
</div>
About rotation: You can rotate the whole thing, but not the background image alone, so you have to use two DIVs: Put one rotating div into another (smaller) div that has overflow: hidden.The rotating DIV has to have position: absolute and z-index: -1 to remain in the background.
Here's that situation in action:
.y {
width: 400px;
height: 300px;
margin: 100px;
overflow: hidden;
position: relative;
}
.x {
position: absolute;
width: 800px;
height: 600px;
left: -200px;
top: -100px;
z-index: -1;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
animation: move 5s infinite linear;
}
#keyframes move {
100% {transform: rotate(360deg);}
}
<div class="y">
Any content here.
<div class="x">
</div>
</div>
I have tried changing the image opacity in css. But that is affecting all the children inside it. I have looked upon many stackoverflow questions and answers, but still it's not working for me. Hence, decided to ask a question myself.
My sample code :
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
CSS :
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
At first, I tried changing the opacity of the div home, but since it was eating up the text as well, so I decided to change the image opacity manually using GIMP.
I changed it. Even then the text doesn't look to be having the actual color. So I tried making it glow by doing some text-shadow and stuff. Still I don't seem to get the actual text color.
Original Image
This is the actual picture without changing the opacity.
Image with changed opacity in GIMP
This is the image after changing it's opacity in GIMP.
I want the image to have this kind of opacity but the text color of the first image.
Hope I am clear. I uploaded those images here, but since I don't have reputation enough so had to share the links after uploading in another website.
you can use pseudo element for adding background and add opacity to it
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#home {
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#home:after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(http://placeimg.com/640/480/any) no-repeat center center fixed;
background-size:100% auto;
opacity: 0.5;
}
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #222 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2>
<br />
</div>
The only way I know of (so far) is to use rgba() as your background-color; this doesn't affect its children (divs or elements).
Example:
rgba(0,0,0,0.5)
Use a div inside a div to serve the background, and make that div only have opacity:
Use background-size:cover; to let the image cover fully. It will abide to the sie of the div.background. So you need to set the div.background to width and height 100%.
http://jsfiddle.net/Preben/0mgrt069/13/
<div id="home" class="home">
<div class="background"></div>
<h2>Find the suitable tutor you are looking for..</h2>
</div>
And CSS:
h2 {
margin-top:130px;
text-shadow: #fff 0 0 10px;
color:black;
font-weight:bold;
font-family: 'Gloria Hallelujah', cursive;
}
.background{
background:url(http://lorempixel.com/400/300/nature/);
background-size:cover;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .4;
width: 100%;
height: 100%;
}
I solved it somehow. What I did is I added another div overlay_home
and changed it's rgba in css. That makes the image only change it's opacity without the text.
<div id="home" class="home">
<div id="overlay_home"></div>
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
#overlay_home{
height:100%;
width: 100%;
position: absolute;
background-color: rgba(0,0,0,0.5)
}
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... */
}