Reducing the opacity of an image
-
Hi, I’m struggling with getting an image to have more of a shadow effect or maybe less opacity on the page.
The specific page id is 2091 and I have that linked as the homepage.
You’ll see a dark background (that is a custom background image linked by url from the media library) and on the actual page I have an image which is part of an image block. It’s an image of two hearts with a gold glow around it.
I find the colours of the hearts to be too overpowering and I’m wanting to reduce the opacity of that image (if that’s the correct way to do it).
I’ve only found online how to reduce the opacity of background images but the image of the hearts is not a background image, I’m trying to find out if its possible to reduce that down and if that’s possible to do in css.
Any tips or anything on how to solve this will be greatly appreciated. Thanks.
The blog I need help with is: (visible only to logged in users)
-
Hello there,
Try this CSS rule
/*change the opacity to the image on homepage*/ .wp-block-gallery.is-cropped .blocks-gallery-item img { opacity: 0.5; }you can make the opacity lighter or heavier by adjusting the 0.5 value to suit the strength you want.
-
Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact
-
Hi, (reply to therefoiam) would I need to put .page-id-95 before .wp-block? I assume I would do to specify that it’s for that page, but I wasn’t sure. Thanks.
-
Hi, that code worked and I didn’t need to put the page id in front of the code, it didn’t work when I did that.
I took a screenshot of the homepage and I want to use that as the background for several pages.
The problem I have is that the image repeats on the mobile screen and appears extremely small. I was given this link in online chat https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I’ve used the no-repeat line stop it from repeating but I’m trying to get the image to cover the whole mobile screen.
I’ve tried using the background-size: 200px 100px and increasing it bit by bit but it just stays in it’s static size and I can’t increase it.I’ve thought of applying the night sky with stary background to other pages and apply the code you sent me to dim the hearts (if I add them as a block on each page) but then I won’t be able to have text over the two hearts and have them as a background. (because the two hearts are not set as a background image).
Would anyone have any suggestions on how to get round this problem?
I think taking a screenshot of the dimmed hearts with the dark background is a good way to do it (I think) but I can’t get that to fully display over a page as a background.
It’s either repeating and looks really small or it’s set to a height and width and I can’t seem to ammend it.Thank you in advance.
-
hi there,
The problem I have is that the image repeats on the mobile screen and appears extremely small. I was given this link in online chat https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Did you let them know on the online chat that the CSS code they gave was not working? They usually help you until you have managed to achieve what you want.
’ve used the no-repeat line stop it from repeating but I’m trying to get the image to cover the whole mobile screen.
I’ve tried using the background-size: 200px 100px and increasing it bit by bit but it just stays in it’s static size and I can’t increase it.Which page is this that has the background image repeating or not covering the whole page?
-
Hi, the page is just a seperate page I setup that is not on the menu scriptureonbeads.com/image and the page id is 5571.
You can see on the mobile version of the page that the image is repeated on the screen but I would llike if possible for the image to cover the whole of the mobile screen.
The dimensions I get from the image when I view it in the media library are 1481×863, the name of the image is 2021-05-08 (3) and the url for the image is https://scriptureonbeads.files.wordpress.com/2021/05/2021-05-08-3.png.
So I’ve viewed the page from my laptop and it does cover the whole dekstop screen but that is not the case when I view it from my smartphone.
-
Just to say, I’ve just added some random text to the page and when I’ve viewed it from the dekstop it looks like it is repeating on the desktop view as well the mobile view.
-
If you want the image to cover the page (regardless of the device you are viewing on) you can find this code that was given to you earlier:
/* Change background image on page "Image" | 29375625-hc */ .page-id-5571 { background-image: url('https://scriptureonbeads.files.wordpress.com/2021/05/whatsapp-image-2021-05-09-at-17.26.57.jpeg'); background-size: contain; background-repeat: no-repeat; background-size: 720px 1369px !important; }And change it to this instead)
/* Change background image on page "Image" | 29375625-hc */ .page-id-5571 { background-image: url('https://scriptureonbeads.files.wordpress.com/2021/05/whatsapp-image-2021-05-09-at-17.26.57.jpeg'); background-size: cover; background-repeat: no-repeat; }Also find and DELETE this code on starting on line 17, which is interfering:
/* Change background image on page "Homepage" | 29375625-hc */ .page-id-5571 { background-image: url('https://scriptureonbeads.files.wordpress.com/2021/05/2021-05-08-3.png'); background-size: contain; }Note that when you use
background-size: cover;it will scale the image up to cover the entire page, however if your page is very long (i.e. one that requires scrolling to see all text) the image will be scaled up quite a bit as it attempts to cover all that real estate, even the parts of the page that are not in view when it loads.So this can lead to some odd scaling affects where the heart graphic may be very large as the image is scaled up to cover a long page. The longer the page, the more pronounced this is. Also, because phone screens are taller and narrower than desktop screens, this scaling issue is more pronounced on mobile.
Hope this helps
-
I also wanted to point out that I see you have over 1600 lines of custom CSS code, and have gotten help from over 20 happiness engineers (both here in the forums and in chat) and this is starting to cause issues with the changes to your site.
To explain, a single happiness engineer is not aware of changes that others have made, and in 1600 lines of code there is no way they can scan to see what changes they are making will conflict with changes that someone else has suggested during a previous support session. This can create a lot of conflicts and strange behaviour, and as more and more CSS is added to your site the situation just gets worse and worse.
With this in mind, I would recommend you hire a skilled designer to help you with your changes. CSS is a complicated design language that takes years to learn. As support workers we know some CSS, but we do not have the skill sufficient to change the entire look of your site to be one of a kind custom. You are currently at the limits of what we can support: https://wordpress.com/support/css-support/
When you work with one designer (who has authored all the code) it is much better and leads to a better functioning website than if you have 20+ different people helping and stepping over one another’s changes.
-
Hi, thank you for your responce, it was really helpful.
I ammended the code and I think it looks a lot better and less stretched, I didn’t realise that I had the same code further down on line 17 so I made sure to delete that, I wonder if that was why I was stuggling with getting the image right.
The image looks better and I applied the background-position: center; line to centralise the image which puts the hearts in the middle of the page.
Me and my friend were considering using it for all pages that under the folders for the Joyful/Sorrowful/Glorious mysteries or maybe just apply it to pages that don’t have much text, we’ve not tried it out anyother pages yet other than a random one (Images id-5571) but we don’t want it look stretched if we apply to a page with a lot of text.
We have the effect that we wanted for the homepage and that is only possible because the two hearts image is part of a image block and we got a code to dim it and the night sky is the background image.
If we weren’t to use the screenshot of the background image with the dimmed hearts, would there be another way of applying text over a set image when editing a page using the gutenberg editor?
I know there is a text and media block but that only applies text to the left or to the right of an image, not over an image.
If not, it’s not a problem, the marble images we have have been applied to a lot of pages so they can be used instead as an alternative, it would just be nice for every other page to look exactly the same as the homepage in the background.
Thank you for your help.
-
Yeah, a lot of the css codes are just duplicated to other pages.
One of them is to remove the drop shadow from the site title on a page, obviously another is for ease to make chnages quicker like the font colour and size; I think another was to reduce the gap between between the hearts image and the site title and the other lines of code are to tailor custom background images to pages instead of using solid colours.The intent was not to use a lot of code and I do have some knowledge of css and html but it was my under confidence on how to apply to specific pages on wordpress so that is why I used the live chat a lot.
I can understand how it may look with all the css and expecting someone to offer assistance, I wasn’t aware that it was causing a lot of problems.
I was under the impression that people could see that most of the codes were duplicated for different pages (just to try and make the site look right) and it wasn’t an issue in terms of support.I am getting more comfortable on how to apply css to specific pages and I have picked up a lot from the help I have gained from the wordpress engineers and a lot of issues or problems I have I usually go to w3schools website for help and I use the live chat as a confirmation to make sure I’ve got it right or to tailor the code to work with wordpress.
I apologise if I have caused any issues with the amount of css that has been applied to the site.
-
Hi again,
If we weren’t to use the screenshot of the background image with the dimmed hearts, would there be another way of applying text over a set image when editing a page using the gutenberg editor?
I know there is a text and media block but that only applies text to the left or to the right of an image, not over an image.
I think the way that I would approach this is to use a “cover block” which is a block that you can add an image background to, and blocks on top of it, kinda like a overlay: https://wordpress.com/support/wordpress-editor/blocks/cover-block/
In this way you could separate the heart graphic from the starry background graphic. This would allow you to set just the starry background for the entire page, and then add the heart graphic inside the cover block (with text over it) using the cover block. Because the two graphics would be independent it would allow the stars to scale and fill the page, but the size of the heart graphic would not be affected, and would be very similar in scale on phone vs. desktop.
I can understand how it may look with all the css and expecting someone to offer assistance, I wasn’t aware that it was causing a lot of problems.
I was under the impression that people could see that most of the codes were duplicated for different pages (just to try and make the site look right) and it wasn’t an issue in terms of support.No problem, it looks like no one has mentioned it to you yet so you probably were not aware. I should probably clarify CSS is a design language that takes years to fully master, and if a single person helps craft your CSS they likely know everything that went into the code without needing to check. When we help individually we do our best to read what has gone before, but as the bulk of the code grows it becomes harder to scan at a glance. Also we’re not trained designers here in support and while we know the basics of CSS we do not have that kind of mastery, and the fact that code is repeated often (with only the page ID changing) makes it more difficult to scan as well.
Which really is the central issue here. Anytime you are using “per page” styling to create pages that look different from one another, it causes your code to multiply exponentially. With that in mind I’d recommend setting a separate background that is easy to scale without causing issues (and is the same for all pages on the site) and then adding any foreground content using blocks so that you can cut down on the bulk of your code.
Hope this helps point you in the right direction!
-
Hi, I will try and tidy up the css at some point as it does look a bit chaotic but I will try and do this in my own whenever I have the time.
In regards to the image of the two hearts, what I did was I used the original code that was sent to me at the beginning of the forum to reduce opacity but I temporarily removed the night sky background and I took screenshots of different dim strengths and then I cropped those images down; so that way I was able to seperate the dimmed image from the background and now I can apply that dimmed image to any other page that I want.
I applied this to the background image:
background-image: url(‘https://scriptureonbeads.files.wordpress.com/2021/05/0.4-dim.png’);
background-size: 600px 600px !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;I think it looks good on the page and I set the screenshot that had the image dimmed on 0.4.
Someone also helped me to dim other images by using a css workaround so I can apply this to other images (if I wanted to do that in the fututre).
The workaround was to apply
/* Adding opacity over images with “image-dim” class | wb-29507901-hc */
.image-dim img {
opacity: 0.4; }So any image I upload to a block I can dim, take a screenshot of it and then apply that to any page that I want, as I found it difficult to find a solution online to dim a background image.
The code that was sent to me at the beginning of the forum (I think) only targeted a block image (or just a specific block image on the homepage) so this workaround allows me to dim any image, which is perfect.Thank you a lot for your help, I really appreciate all the help and advice; I’m learning a lot from all the support given and all the wordpress engineers have been more than helpful.
-
So any image I upload to a block I can dim, take a screenshot of it and then apply that to any page that I want
If you just want an image to be dimmer, rather than transparent, it would be much simpler to just use an image editor like Photoshop or GIMP and make changes to the image’s colouring there. Then upload the modified version of the image to your site.
CSS is really not the best tool to achieve what you’re trying to do here. CSS opacity is for if you want to change the transparency of an image, so that content or a background colour behind the image shows through. And that is not what you’re describing here.
-
I’ll consider doing that with a image editor, I’ve been using the workaround with opacity on several images and me and my freind who is funding the site is happy with the result.
I’ve perfected a way to do the process without too much hasssle or messing about; so until I can find a better way of doing this, I’m happy to go through this process.
- The topic ‘Reducing the opacity of an image’ is closed to new replies.
WordPress.com Forums 
