Highlighted

strange unwanated color zone in transparent zone of .png image background

Participant ,
Apr 13, 2018

Copy link to clipboard

Copied

I have a .png image on the page of my dreamweaver page created from a DW starter template.
The image is all transparent outside of the double circle area. In the DW preview it shows as it should but when shown in any browser it has this weird dark blue zone. The page background is an image in gradients of dark-blues but they are screened out by this dark-blue shadow on the .png. See orange text on two images below:image-in-dw-preview.jpg

image-in-browser.jpg

Guess what! I solved the issue. It frustrated me all day yesterday almost to the point of tears at times. And in the end it was so simple I can't understand why it took me so long to work it out, but it's because I'm so new to responsive design.


I'm working, as I said, with a starter template which has created the media queries for me as part of the template. That image with the two circles (shown above) was replacing a simpler circular image in the template and of course if I'd stuck to the same circular shape as the template I would probably have had no problem.

I used css to put a transparent background on that image but the transparency  did not seem to be working and I kept getting that solid colour where there should have been none.
My error was not realising I would need to make the change across all the media queries - not just in one place in the css file.

With no live page to show you, I guess I should have copied my css into this discussion and one of you would probably have picked it up straight away.

And it works fine with my lovely dark-blue background dolphin image too so I can use it after all.

Views

373

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

strange unwanated color zone in transparent zone of .png image background

Participant ,
Apr 13, 2018

Copy link to clipboard

Copied

I have a .png image on the page of my dreamweaver page created from a DW starter template.
The image is all transparent outside of the double circle area. In the DW preview it shows as it should but when shown in any browser it has this weird dark blue zone. The page background is an image in gradients of dark-blues but they are screened out by this dark-blue shadow on the .png. See orange text on two images below:image-in-dw-preview.jpg

image-in-browser.jpg

Guess what! I solved the issue. It frustrated me all day yesterday almost to the point of tears at times. And in the end it was so simple I can't understand why it took me so long to work it out, but it's because I'm so new to responsive design.


I'm working, as I said, with a starter template which has created the media queries for me as part of the template. That image with the two circles (shown above) was replacing a simpler circular image in the template and of course if I'd stuck to the same circular shape as the template I would probably have had no problem.

I used css to put a transparent background on that image but the transparency  did not seem to be working and I kept getting that solid colour where there should have been none.
My error was not realising I would need to make the change across all the media queries - not just in one place in the css file.

With no live page to show you, I guess I should have copied my css into this discussion and one of you would probably have picked it up straight away.

And it works fine with my lovely dark-blue background dolphin image too so I can use it after all.

Views

374

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 13, 2018 0
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

Please supply a link to the online location of the site.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Participant ,
Apr 13, 2018

Copy link to clipboard

Copied

it is not online yet. I am creating it in my home computer. It's nowhere near ready to upload.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

Much is the pity. The problem is that it is impossible to say what the cause of the problem is without seeing it in situ.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Enthusiast ,
Apr 14, 2018

Copy link to clipboard

Copied

Sometimes when adding changes to an element using the CSS Designer panel it can happen inadvertently the same class is added to a selected item in the live preview.

Let me explain, you click on the + in the CSS Designer panel and write the class "foo" for a div , at the same time your mouse cursor is on the menu and the "foo" class is also added to the menu.

Try to check if this is the case

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Participant ,
Apr 14, 2018

Copy link to clipboard

Copied

Okay, I'm narrowing it down I think. There was a border-radius property in the Css for the "header .profilePhoto" selector. When I removed that - the artifact is still there but now it is a plain rectangle surrounding the image. Then when I included a background red color property, the artifact became a bright red rectangle around the .png image. At this point the solution seems obvious. Just change the background color to transparent. I did that. But it is not transparent - it is black.i can't get the transparency to work there in a way the browsers understand.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

No code, no link to work in progress, no ideas. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 1
Participant ,
Apr 14, 2018

Copy link to clipboard

Copied

Well, not to worry. This is the least of my problems now. Dreamweavers functionality is disappearing in all directions. Don't know what I've done wrong. But i'll come back to this tiny problem later when I've got my bigger problems sorted. Thanks all for trying.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

I just noticed in one of your other posts that there is a good reason for the blob of different colour. Please see

scrnshot4forum.jpg


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 1
Participant ,
Apr 15, 2018

Copy link to clipboard

Copied

Guess what! I solved the issue. It frustrated me all day yesterday almost to the point of tears at times. And in the end it was so simple I can't understand why it took me so long to work it out, but it's because I'm so new to responsive design.


I'm working, as I said, with a starter template which has created the media queries for me as part of the template. That image with the two circles (shown above) was replacing a simpler circular image in the template and of course if I'd stuck to the same circular shape as the template I would probably have had no problem.

I used css to put a transparent background on that image but the transparency  did not seem to be working and I kept getting that solid colour where there should have been none.
My error was not realising I would need to make the change across all the media queries - not just in one place in the css file.

With no live page to show you, I guess I should have copied my css into this discussion and one of you would probably have picked it up straight away.

And it works fine with my lovely dark-blue background dolphin image too so I can use it after all.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Adobe Community Professional ,
Apr 15, 2018

Copy link to clipboard

Copied

Thanks for the feedback.

As a side issue, are you in the AEST timezone?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2018 0
Participant ,
Apr 16, 2018

Copy link to clipboard

Copied

I'm not sure what the AEST timezone is. I'm in New Zealand which is NZST timezone.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Adobe Community Professional ,
Apr 14, 2018

Copy link to clipboard

Copied

It looks like it might be an image artifact.   Until you put your problem page online though, we are just guessing. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0
Participant ,
Apr 14, 2018

Copy link to clipboard

Copied

Here's an interesting thing. Originally this page had a plain dark blue background. The problem surfaced when I changed the background to the dark blue image with the gradients and barely-visible dolphin shapes. It looks very similar to the original plain background, but just a little more interesting.
So this morning I removed the background image and went back to the plain dark-blue background color. The "artifact" (or whatever it is) was gone. That's all very well but I really do prefer it with the background image. I tried the background image again. The artifact came back. So it must be something to do with the interaction between the .png and that background image.
Still hoping to find a work-round.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2018 0