I am starting a new webpage at draincleaningphx.com, and the eagle image on the homepage using Chrome still displays the transparent background as white. Ive tried the image saved as both png and gif file. I've read about using css to make the background transparent but can't figure it out.
Any ideas? Thanks.
The Eagle image is transparent.
If you put any other color in the CSS for the content:
#content {
float: right;
width: 640px;
margin-right: 30px;
background-color: #000;
}
for example black, you can see, the image is transparent.
If you want to add the shadow to eagle, you need edit to picture with shadow around the eagle :D
Did you just open the image in the browser or did you embed it in a HTML file / defined as background-image?
Related
I have been googling this for hours but none of the suggestions found are working.
I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.
It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS
.header-column-small {
float: left;
width: 30%;
background-color: transparent !important;
}
.header-column-small img {
width:220px;
height: 150px;
object-fit: contain;
}
The background color is defined further up the chain in a parent div class.
And here is the HTML
<div class="header-column-small">
<img src="books-on-shelf-small.png" />
</div>
Here is how it looks
Screenshot
I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.
Any help really appreciated
Many thanks
Mark
OK, hangs head in shame... :)
Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.
I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..
Thanks to those who replied so quickly to shine a light on my short-sightedness!
Cheers
Mark
I created a responsive box for my site (http://www.to-hawaii.com/trees) and it works fine except one thing. See here http://www.to-hawaii.com/page.jpg on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525
.images_tabbox {
max-width: 495px;
width: 100%;
float: left;
background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
}
When I remove float:left; this particlar issue is fixed but then the whole box looks like this http://www.to-hawaii.com/page2.jpg
I would appreciate it if someone has any ideas how to fix this. thanks!
It's because your image(s) have a solid white background. The white on the left and right is part of the actual jpg. To fix it you have to save your image again from the source (hopefully you have access to the source design files) with a transparent background as a png or gif format. jpgs can't have transparent backgrounds.
I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?
You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:
img {
background: steelblue;
}
img:hover {
background: skyblue;
}
Demo: http://jsbin.com/jeqihuxo/2/edit
Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.
I am building an information website for a client who is hosting an MUN in their school. I'm using Weebly for this because the client wants to be able to control their data themselves, so they need an easy interface. On the homepage, I have used the landing-page format to have the MUN logo float over a background image.
As you can see, there's an ugly white background in the logo. I attempted to fix this by editing the JPG in PS, removing the background and saving as PNG. I then uploaded the PNG:
and wrote it into the website's CSS like so:
.landing-page #banner {
padding: 0;
}
#bannerleft {
float: right;
width: 400px;
}
.landing-page .wsite-header {
width: 400px;
height: 300px;
background: url(logo.png) no-repeat;
}
However, despite the image being a PNG with a transparent background, the image on the website still had a white background. The slight changes in the image were apparent, so I knew that the chosen PNG had been rendered, but yet the background remained the same. I suspect it has something to do with the container behind the image showing through.
How can I make the background image show through the logo using PNG transparency?
I have a background image and below that I want to have a color.
I have this CSS:
body {
background: url('/images/background.jpg');
background-color: #000;
}
But the image appears with no color. I've also tried this:
body {
background: #000 url('/images/background.jpg');
}
But that doesn't work either. What am I doing wrong?
What do you really want? The background color around the image background or in the back of the image? If it's in the back of the image you have to use an .png (transparent) image and the background: #000 url('/images/background.png');
background: #000 url('/images/background.jpg');
Your background color is actually working but it is being overlapped by declaring a background-image. Unless your image supports transparency like .png and opacity was declared. You would be able to view your bg-color.
It will help if you provide us your exact image and the output you want to achieve.
Use in this way background: #657b78 url('../images/background.jpg') repeat top left;. Do not forget to check if the URL of such image is correct.