Yea... that's my question; How to change the OPACITY of a background image?
My background image has both dark light spots so my text won't show up on certain places. I tried to change Opacity but it's actually changing the Opacity of my LOGO and Text (not my background image). Am I doing something wrong?
How to change the OPACITY of a...
ANTHONY L WELLS
Registered User
10 posts
Its A Kind Of Bali Magic
Registered User
5,517 posts
Try putting an overlay on top of the background image as a second child of the parent container, then the text as the third child make sure that your text and background image have different class names to the logo other text etc.
Then set the opacity on the overlay
You could also set a gradient for the overlay which I find works best for something like that
You can also give the overlay text a bit of a text shadow, keep the numbers small to avoid too much of a shadow and you could also add a stroke to the text, color same as text and set the width as REM by using REM you can increase the stroke by 2 decimal places once again giving the text some additional strength to make it stand out.
I can do a step by step video to demonstrate the way to do it, if that will help just shout out.
By the way which framework are you using
Bootstrap foundation materialize or Frameworkless
Then set the opacity on the overlay
You could also set a gradient for the overlay which I find works best for something like that
You can also give the overlay text a bit of a text shadow, keep the numbers small to avoid too much of a shadow and you could also add a stroke to the text, color same as text and set the width as REM by using REM you can increase the stroke by 2 decimal places once again giving the text some additional strength to make it stand out.
I can do a step by step video to demonstrate the way to do it, if that will help just shout out.
By the way which framework are you using
Bootstrap foundation materialize or Frameworkless
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact me
https://rsd-tutorialscom.coffeecup.com/index.html
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact me
https://rsd-tutorialscom.coffeecup.com/index.html
ANTHONY L WELLS
Registered User
10 posts
Thank you for your reply but.. I'm seriously struggling to digest and act on all of that. I have no idea how to put an overlay. Is that adding another white background on top of the existing one?
I suppose a video would be very nice in this case.
Thanks,
TW
I suppose a video would be very nice in this case.
Thanks,
TW
ANTHONY L WELLS
Registered User
10 posts
Never mind. I used Photoshop to adjust the Opacity of the original background image and just changed it.
Thanks,
TW
Thanks,
TW
Inger
Senior Advisor
14,690 posts
If you need to have an image with reduced opacity and text on top again, you could check out this page in my component collection: https://mock-up.coffeecup.com/va-comps/ … t-img.html . You can download a ready-made component. It was made with Frameworkless, but if you are using one of the other layout systems in SD, you'll find the same on the respective pages.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Tom
Guest
3 posts
You’re probably setting opacity on the whole container instead of just the background. Use a pseudo-element like `::before` with the image and apply opacity to that. It keeps your text and logo fully visible while only dimming the background.
Vendekin
Guest
2 posts
You’re right, changing opacity directly on the background often affects everything inside that container. A cleaner way is adding a separate overlay div on top of the background image and adjusting its opacity instead.
We use a similar layered approach in some UI screens at vendekin, where vNetra displays data over images without affecting the underlying assets. Keeping the overlay separate usually solves this issue.
We use a similar layered approach in some UI screens at vendekin, where vNetra displays data over images without affecting the underlying assets. Keeping the overlay separate usually solves this issue.
aqsa97018
Guest
1 post
To change the opacity of an object in most applications, you first need to select the specific shape, image, or text box. Then, right-click on it and choose an option like "Format Shape" or "Format Picture" to open the formatting menu on the side. Within that menu, look for the "Fill" or "Effects" section, where you will find a "Transparency" slider; adjusting this slider is how you control the opacity, allowing you to make the object more see-through.
flstudiomobileapk4
Guest
1 post
If the opacity adjustment is affecting your text and logo instead of the background, it usually means the background image is on the same layer or that you’re adjusting the opacity of the entire group/container rather than the image itself.
lepharaon33
Guest
3 posts
Option 1 Background opacit
Option 2 Add a dark/li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.section {
position: relative;
color: white;
padding: 40px;
}
.section::before {
content: "";
position: absolute;
inset: 0;
background: url("bg.jpg") center/cover no-repeat;
opacity: 0.4; /* adjust transparency */
z-index: -1;
}
</style>
</head>
<body>
<div class="section">
<h1>Title</h1>
<p>Your text stays fully visible.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.section {
position: relative;
color: white;
padding: 40px;
}
.section::before {
content: "";
position: absolute;
inset: 0;
background: url("bg.jpg") center/cover no-repeat;
opacity: 0.4; /* adjust transparency */
z-index: -1;
}
</style>
</head>
<body>
<div class="section">
<h1>Title</h1>
<p>Your text stays fully visible.</p>
</div>
</body>
</html>
Option 2 Add a dark/li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.section {
position: relative;
background: url("bg.jpg") center/cover no-repeat;
padding: 40px;
color: white;
}
.section::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45); /* adjust overlay darkness */
z-index: -1;
}
</style>
</head>
<body>
<div class="section">
<h1>Readable text</h1>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.section {
position: relative;
background: url("bg.jpg") center/cover no-repeat;
padding: 40px;
color: white;
}
.section::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45); /* adjust overlay darkness */
z-index: -1;
}
</style>
</head>
<body>
<div class="section">
<h1>Readable text</h1>
</div>
</body>
</html>
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
